Im Jahr 2000 wurde die Mutation Events API spezifiziert, damit Entwickler einfach auf Änderungen im DOM reagieren können (z. B. DOMNodeRemoved, DOMAttrModified usw.).
Diese Funktion wurde von Webentwicklern nicht häufig verwendet, bot aber einen sehr praktischen und beliebten Anwendungsfall für Chrome-Erweiterungen, wenn eine Aktion ausgeführt werden sollte, wenn sich etwas auf der Seite ändert.
Mutationsereignisse sind zwar 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.
DOM-Mutationsbeobachter wurden in der DOM4-Spezifikation eingeführt und ersetzen Mutation Events. Während Mutation Events für jede einzelne Änderung langsame Ereignisse auslösten, sind Mutation Observer mit Rückruffunktionen schneller, die nach mehreren Änderungen im DOM gesendet werden können.
Sie können die Liste der Änderungen, die die API bietet, manuell verarbeiten oder eine Bibliothek wie die Mutation Summary verwenden, die diese Aufgabe erleichtert und die Zuverlässigkeit der Änderungen im DOM erhöht.
Sie können Mutation Observers bereits in Chrome Beta verwenden, um Änderungen im DOM zu erkennen, und sind dann bereit, sie zu verwenden, sobald die Funktion in der stabilen Version (Chrome 18) verfügbar ist. Wenn Sie derzeit die eingestellten Mutationsereignisse verwenden, migrieren Sie einfach zu Mutation Observers.
Hier ein Beispiel für die Auflistung von eingefügten 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);