--- title: MutationObserver slug: Web/API/MutationObserver tags: - Cambiamenti del DOM - DOM - DOM Reference - Mutation Observer - Mutation Observer e resize - resize - resize listener translation_of: Web/API/MutationObserver ---

L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del DOM. È stata progettata per sostituire i Mutation Events che fanno parte del DOM3 Events specification.

Costruttore

{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}: Crea e restituisce un nuovo MutationObserver che invocherà una funzione di callback specificata alla mutazione del DOM.

Metodi

{{domxref("MutationObserver.disconnect", "disconnect()")}}: Interrompe la ricezione da parte dell'istanza MutationObserver di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}
{{domxref("MutationObserver.observe", "observe()")}}: Configura il MutationObserver affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}: Rimuove tutte le notifiche in coda sul MutationObserver e le restituisce come nuovo {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}

Mutation Observer & customizzazione del resize event & demo

https://codepen.io/webgeeker/full/YjrZgg/

Esempio

L'esempio seguente è un adattamento di questo post

// Seleziona il nodo di cui monitare la mutazione
var targetNode = document.getElementById('some-id');

// Opzioni per il monitoraggio (quali mutazioni monitorare)
var config = { attributes: true, childList: true, subtree: true };

// Funzione di callback da eseguire quando avvengono le mutazioni
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Creazione di un'istanza di monitoraggio collegata alla funzione di callback
var observer = new MutationObserver(callback);

// Inizio del monitoraggio del nodo target riguardo le mutazioni configurate
observer.observe(targetNode, config);

// Successivamente si può interrompere il monitoraggio
observer.disconnect();

Leggi pure

Specifiche