Come usare MutationObserver?

Question

Recentemente mi sono imbattuto in questa fantastica funzione MutationObserver che conserva le tracce delle modifiche su qualsiasi elemento dom. Ho usato il codice che è stato mostrato sulla rete di sviluppatori di Mozilla, ma non riesco a farlo funzionare. Questo è il codice che ho usato (link):

// create an observer instance 
var target = document.querySelector('#something'); 
console.log(target); 
var observer = new WebKitMutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log("Success"); 
     //$('#log').text('input text changed: "' + target.text() + '"'); 
     //console.log(mutation, mutation.type); 
    });  
}); 
observer.observe(target, { attributes: true, childList: true, characterData: true }); 
//observer.disconnect(); - to stop observing 

// test case 
setInterval(function(){ 
    document.querySelector('#something').innerHTML = Math.random(); 
},1000); 

Il codice di cui sopra non sembra funzionare. Tuttavia se modifico lo stesso codice con un po 'di jQuery, tutto sembra funzionare bene (Demo here). C'è qualcosa che mi manca dai documenti o sto solo interpretando male la funzione di osservatore.

Answer 1

È necessario subtree: true

http://jsfiddle.net/6Jajs/1/

Il testo interno sarebbe normalmente un elemento di testo child() nel DOM. Senza la sottostruttura, guarderà solo l'elemento stesso.

C'è una possibile confusione intorno a "characterData" (https://developer.mozilla.org/en-US/docs/Web/API/CharacterData), ma sembra che si applichi solo ai nodi che contengono direttamente testo. Il DOM è strutturato in modo che la maggior parte degli elementi di markup contengano tipi misti che includono facoltativamente un nodo di testo figlio (che a sua volta implementerebbe characterData, ma sarebbe un figlio del nodo target).