In 2000 werd de Mutation Events API gespecificeerd om het voor ontwikkelaars makkelijker te maken om te reageren op wijzigingen in een DOM (bijv. DOMNodeRemoved, DOMAttrModified, etc.).
Deze functie werd niet veel gebruikt door webontwikkelaars, maar het was een erg handig en populair gebruiksvoorbeeld voor Chrome-extensies. Zo konden ze een actie uitvoeren wanneer er iets op de pagina veranderde.
Mutatiegebeurtenissen zijn nuttig, maar veroorzaken tegelijkertijd prestatieproblemen. De gebeurtenissen zijn traag en worden te vaak synchroon geactiveerd, wat ongewenste browserbugs veroorzaakt.
Geïntroduceerd in de DOM4-specificatie , zullen DOM Mutation Observers Mutation Events vervangen. Waar Mutation Events trage events activeerden bij elke wijziging, zijn Mutation Observers sneller dankzij callbackfuncties die na meerdere wijzigingen in de DOM kunnen worden geactiveerd.
U kunt de lijst met wijzigingen die de API biedt handmatig verwerken , of een bibliotheek zoals Mutation Summary gebruiken. Deze maakt deze taak eenvoudiger en biedt een extra betrouwbaarheidslaag met betrekking tot de wijzigingen die in de DOM hebben plaatsgevonden.
Je kunt Mutation Observers in Chrome Beta gebruiken om wijzigingen in de DOM te detecteren en bent klaar om te gebruiken in de stabiele versie (Chrome 18). Als je momenteel de verouderde Mutation Events gebruikt, kun je gewoon migreren naar Mutation Observers.
Hier is een voorbeeld van het weergeven van ingevoegde knooppunten met mutatiegebeurtenissen:
var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);
En dit is hoe het eruit ziet met Mutation Observers:
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);