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

Specifiche

Specifica Stato Commenti
DOM
The definition of 'MutationObserver' in that specification.
Living Standard  

Compatibilità dei Browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Requires the vendor prefix: Webkit
Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Requires the vendor prefix: Webkit
WebView Android Full support Yes
Full support Yes
No support ? — ?
Prefixed
Prefixed Requires the vendor prefix: Webkit
Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Requires the vendor prefix: Webkit
Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Requires the vendor prefix: Webkit
Samsung Internet Android Full support Yes
MutationObserver() constructorChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Requires the vendor prefix: Webkit
Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Requires the vendor prefix: Webkit
WebView Android Full support Yes
Full support Yes
No support ? — ?
Prefixed
Prefixed Requires the vendor prefix: Webkit
Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Requires the vendor prefix: Webkit
Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Requires the vendor prefix: Webkit
Samsung Internet Android Full support Yes
observeChrome Full support 18Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support Yes
disconnectChrome Full support 18Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support Yes
takeRecordsChrome Full support 18Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: frappacchio
Ultima modifica di: frappacchio,