Wie kann ich hinzugefügte Elemente im DOM erkennen und darauf reagieren?

Erkennen von DOM-Änderungen für hinzugefügte Elemente

Einführung

Um auf Änderungen im Document Object Model (DOM) zu reagieren, müssen Entwickler häufig Funktionen ausführen wenn Elemente zum HTML hinzugefügt werden. Dieser Artikel bietet eine Lösung mit MutationObserver und bietet sowohl einen erweiterten Ansatz, der auf modernen Browsern funktioniert, als auch eine Fallback-Methode für ältere Browser.

Der erweiterte Ansatz: MutationObserver

MutationObserver ist eine API, die es Ihnen ermöglicht um bestimmte Änderungen im DOM zu beobachten und darauf zu reagieren. Zum Erkennen hinzugefügter Elemente wird objDOM(obj, callback) verwendet, wobei obj das Zielelement und callback die Funktion ist, die bei Änderungen ausgeführt werden soll. Hier ist ein Codeausschnitt:

var observeDOM = (function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function(obj, callback) {
    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    }
    // Fallback for legacy browsers
    else if (window.addEventListener) {
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

Um observDOM zu verwenden, stellen Sie das zu beobachtende DOM-Element und einen Rückruf bereit, der ein Array von MutationRecord-Objekten empfängt. Jeder MutationRecord stellt eine Änderung im DOM dar, und Sie können hinzugefügte und entfernte Knoten daraus extrahieren.

Beispiel und Demo

Hier ist ein vereinfachtes Beispiel, bei dem ein Rückruf ausgelöst wird, wenn ein Element hinzugefügt wird oder aus einem Listenelement entfernt:

observeDOM(listEl, function(m) {
  var addedNodes = [], removedNodes = [];

  m.forEach(record => record.addedNodes.length && addedNodes.push(...record.addedNodes));
  m.forEach(record => record.removedNodes.length && removedNodes.push(...record.removedNodes));

  console.clear();
  console.log('Added:', addedNodes, 'Removed:', removedNodes);
});

Zu diesem Artikel gibt es eine Live-Demo, die Konsolenprotokolle anzeigt, wenn DOM-Elemente hinzugefügt werden oder entfernt, was die Funktionalität der Beobachtung von DOM-Änderungen zeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich hinzugefügte Elemente im DOM erkennen und darauf reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!