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 invocatoobserve()
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 nuovoArray
di oggettiMutationRecord
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
MutationObserver | Chrome
Full support
26
| Edge Full support Yes | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari
Full support
7
| WebView Android
Full support
Yes
| Chrome Android
Full support
26
| Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS
Full support
7
| Samsung Internet Android Full support Yes |
MutationObserver() constructor | Chrome
Full support
26
| Edge Full support Yes | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari
Full support
7
| WebView Android
Full support
Yes
| Chrome Android
Full support
26
| Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS
Full support
7
| Samsung Internet Android Full support Yes |
disconnect | Chrome Full support 18 | Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support Yes |
observe | Chrome Full support 18 | Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support Yes |
takeRecords | Chrome Full support 18 | Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung 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.