DOM-Änderungen effektiv erkennen

Das Beobachten von Änderungen im DOM ist entscheidend für die Erstellung dynamischer Webanwendungen, die auf Benutzerinteraktionen reagieren. Ein weit verbreiteter Ansatz besteht darin, MutationObserver zu nutzen, eine moderne API, mit der Sie auf DOM-Änderungen achten können. Dieser Ansatz wird von den meisten modernen Browsern unterstützt, einschließlich IE11, Firefox und WebKit.

Um dies zu implementieren, können Sie die folgenden Schritte verwenden:

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

  return function(obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    } else if (window.addEventListener) { // browser support fallback
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

Diese Funktion akzeptiert ein Element (obj) und eine Rückruffunktion (callback) als Argumente. Der Rückruf wird immer dann ausgeführt, wenn eine Änderung am Element oder seinen untergeordneten Elementen vorgenommen wird.

Um die Verwendung zu veranschaulichen, betrachten Sie dieses Beispiel:

  
list item (click to delete)

Dieses Beispiel zeigt Folgendes:

• Hinzufügen eines Elements zur Liste
• Entfernen eines Elements aus der Liste
• Verwenden MutationObserver, um Änderungen in der Liste zu erkennen. Dies kann verwendet werden, um verschiedene Aktionen auszuführen, wie zum Beispiel das Ändern der Benutzeroberfläche oder das Aktualisieren von Backend-Daten.