DOM-Änderungen mit Mutationsbeobachtern erkennen

Paul Kinlan

Im Jahr 2000 wurde die Mutation Events API eingeführt, um Entwicklern die Reaktion auf Änderungen in einem DOM (z. B. DOMNodeRemoved, DOMAttrModified usw.) zu erleichtern.

Diese Funktion wurde von Webentwicklern nicht häufig verwendet, stellte aber einen sehr praktischen und beliebten Anwendungsfall für Chrome-Erweiterungen dar, wenn sie eine Aktion ausführen wollten, wenn sich etwas auf der Seite änderte.

Mutationsereignisse sind nützlich, führen aber gleichzeitig zu Leistungsproblemen. Die Ereignisse sind langsam und werden zu häufig synchron ausgelöst, was zu unerwünschten Browserfehlern führt.

DOM Mutation Observers wurden in der DOM4-Spezifikation eingeführt und ersetzen Mutation Events. Während bei Mutationsereignissen für jede einzelne Änderung langsame Ereignisse ausgelöst wurden, sind Mutation Observers schneller, da sie Callback-Funktionen verwenden, die nach mehreren Änderungen im DOM bereitgestellt werden können.

Sie können die von der API angebotene Liste der Änderungen manuell verarbeiten oder eine Bibliothek wie Mutation Summary verwenden, die diese Aufgabe erleichtert und eine zusätzliche Ebene der Zuverlässigkeit für die Änderungen hinzufügt, die im DOM stattgefunden haben.

Sie können Mutation Observers in Chrome Beta verwenden, um Änderungen im DOM zu erkennen und sich auf die stabile Version (Chrome 18) vorzubereiten. Wenn Sie derzeit die veralteten Mutation Events verwenden, migrieren Sie einfach zu Mutation Observers.

Hier ist ein Beispiel für das Auflisten eingefügter Knoten mit Mutationsereignissen:

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

So sieht es mit Mutation Observers aus:

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);