Im Jahr 2000 wurde die Mutation Events API spezifiziert, um Entwicklern die Reaktion auf Änderungen in einem DOM (z. B. DOMNodeRemoved, DOMAttrModified usw.) zu erleichtern.
Diese Funktion war von Webentwicklern nicht weit verbreitet, war aber ein sehr praktischer und beliebter Anwendungsfall für Chrome-Erweiterungen, wenn sie eine Aktion durchführen wollten, wenn sich etwas auf der Seite änderte.
Mutationsereignisse sind nützlich, verursachen aber gleichzeitig einige Leistungsprobleme. Die Ereignisse sind langsam und werden zu häufig synchron ausgelöst, was zu unerwünschten Browserfehlern führt.
Die in der DOM4-Spezifikation eingeführten DOM Mutation Observers ersetzen Mutation Events. Während Mutation Events bei jeder einzelnen Änderung langsame Ereignisse ausgelöst haben, sind Mutation Observer schneller mit Callback-Funktionen, die nach mehreren Änderungen im DOM bereitgestellt werden können.
Sie können die Liste der Änderungen manuell verarbeiten, die die API anbietet, oder eine Bibliothek wie Mutation Summary verwenden. Dies vereinfacht diese Aufgabe und sorgt für mehr Zuverlässigkeit in Bezug auf die Änderungen, die im DOM vorgenommen wurden.
Sie können Mutation Observers in der Chrome Beta-Version verwenden, um Änderungen im DOM zu erkennen und sich darauf vorzubereiten, wenn es um die stabile Version (Chrome 18) geht. 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);
Und so sieht das 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);