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
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
BCD tables only load in the browser