Jak korzystać z MutationObserver?

Question

Niedawno natknąłem się na tę niesamowitą funkcję MutationObserver, która pozwala śledzić zmiany w dowolnym elemencie domowym. Użyłem kodu, który był wyświetlany w sieci programistów Mozilli, ale nie można go uruchomić. Jest to kod użyłem (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); 

Powyższy kod nie wydaje się działać. Jednak jeśli zmodyfikować ten sam kod z odrobiną jQuery, wszystko wydaje się działać dobrze (Demo here). Czy jest coś, czego mi brakuje w dokumentach lub po prostu błędnie interpretuję funkcję obserwatora.

Answer 1

Trzeba subtree: true

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

Tekst wewnętrzny normalnie byłoby tekst dziecko() elementem w DOM. Bez poddrzewa będzie tylko obserwował ten element.

Możliwe jest zamieszanie wokół "characterData" (https://developer.mozilla.org/en-US/docs/Web/API/CharacterData), ale wydaje się, że dotyczy to tylko węzłów, które bezpośrednio zawierają tekst. DOM jest skonstruowany w taki sposób, że większość elementów znaczników zawiera typ mieszany, który opcjonalnie zawiera węzeł podrzędny (który z kolei zaimplementował charakterData, ale byłby dzieckiem węzła docelowego).