MutationObserver

L'interfaccia 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

MutationObserver()

Crea e restituisce un nuovo MutationObserver che invocherà una funzione di callback specificata alla mutazione del DOM.

Metodi

disconnect()

Interrompe la ricezione da parte dell'istanza MutationObserver di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato 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.

takeRecords()

Rimuove tutte le notifiche in coda sul MutationObserver e le restituisce come nuovo  Array di oggetti 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

• A brief overview
• A more in-depth discussion
• A screencast by Chromium developer Rafael Weinstein

Specifiche

Compatibilità dei Browser