Rileva i cambiamenti del DOM con gli osservatori delle mutazioni

Paul Kinlan

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

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

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

Introdotti nella specifica DOM4, gli osservatori di mutazioni del DOM sostituiranno gli eventi di mutazione. Mentre gli eventi di mutazione attivavano eventi lenti per ogni singola modifica, gli osservatori di mutazioni sono più veloci perché utilizzano funzioni di callback che possono essere inviate dopo più modifiche nel DOM.

Puoi gestire manualmente l'elenco delle modifiche offerte dall'API o utilizzare una libreria come Mutation Summary che semplifica questa attività e aggiunge un livello di affidabilità alle modifiche apportate al DOM.

Puoi iniziare a utilizzare gli osservatori delle mutazioni in Chrome Beta per rilevare le modifiche nel DOM e prepararti a utilizzarli quando saranno disponibili nella versione stabile (Chrome 18). Se al momento utilizzi gli eventi di mutazione deprecati, esegui la migrazione agli osservatori di mutazione.

Ecco un esempio di elencazione dei nodi inseriti con gli eventi di mutazione:

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

Ecco come appare 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);