Rileva i cambiamenti del DOM con gli osservatori delle mutazioni

Paul Kinlan

Nel 2000 era specificata l'API Mutation Eventi per consentire agli sviluppatori di reagire facilmente alle modifiche in un DOM (ad es. DOMNodeRemoved, DOMAttrModified e così via).

Questa funzionalità non era ampiamente utilizzata dagli sviluppatori web, ma rappresentava un caso d'uso molto pratico e popolare per le estensioni di Chrome se volessero eseguire un'azione quando qualcosa nella pagina cambiava.

Gli eventi di mutazione sono utili, ma allo stesso tempo possono creare problemi di prestazioni. Gli eventi sono lenti e vengono attivati troppo spesso in modo sincrono, il che causa alcuni bug indesiderati del browser.

Introdotti nella specifica DOM4, Gli osservatori mutazione del DOM sostituiranno gli eventi di mutazione. Mentre gli eventi di mutazione attivavano eventi lenti per ogni singola modifica, gli osservatori mutazione sono più veloci con le funzioni di callback che possono essere pubblicate dopo più modifiche nel DOM.

Puoi gestire manualmente l'elenco delle modifiche offerte dall'API oppure utilizzare una libreria come Riepilogo mutazione, che semplifica questa attività e aggiunge un livello di affidabilità delle modifiche apportate nel DOM.

Puoi iniziare a utilizzare Mutation Observationr in Chrome Beta per rilevare modifiche nel DOM ed essere pronto a utilizzarlo quando si tratta di una versione stabile (Chrome 18). Se al momento utilizzi gli eventi di mutazione ritirati, esegui la migrazione ad Osservatori mutazioni.

Ecco un esempio di elenco dei nodi inseriti con eventi di mutazione:

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

Ecco il suo aspetto con gli osservatori delle mutazioni:

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);