JavaScript: monitorare le modifiche apportate al DOM di una pagina

Un problema comune in JavaScript è individuare gli elementi che sono stati inseriti dinamicamente in un documento ed eseguire un'azione su di essi. La soluzione è quella di utilizzare l'oggetto MutationObserver.

In passato potevamo utilizzare l'evento DOMNodeInserted:

document.addEventListener('DOMNodeInserted', evt => {
	console.log(evt.target);  // il nuovo elemento	
});

Ma "this feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped". (documentazione di Mozilla). In questo caso dovremmo usare l'oggetto MutationObserver.

Per esempio possiamo ora scrivere:

// Il nodo da monitorare
const target = document.querySelector('#content');

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    let newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // Se sono stati aggiunti nuovi nodi
    	// Azione
    }
  });    
});

// Configurazione
const config = { 
	attributes: true, 
	childList: true, 
	characterData: true 
};
 
// Inizializzazione
observer.observe(target, config);
 
// Possiamo interrompere l'osservazione
observer.disconnect();

Come si può notare, si tratta di un modo molto efficace per monitorare lo stato degli elementi in relazione all'aggiunta di nuovi elementi nella loro struttura DOM.