Dlaczego w przeglądarce Chrome 30 nie działa kod MutationObserver?

Question

Od http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers mam następujący kod:

var insertedNodes = []; 
var observer = new WebKitMutationObserver(function(mutations) { 
alert('run'); 
mutations.forEach(function(mutation) { 
    for (var i = 0; i < mutation.addedNodes.length; i++) 
    insertedNodes.push(mutation.addedNodes[i]); 
}) 
}); 
observer.observe(document, { childList: true }); 
console.log(insertedNodes); 

var divElement = document.createElement('div'); 
divElement.innerHTML = 'div element'; 
document.querySelector('body').appendChild(divElement); 

jsFiddle: http://jsfiddle.net/cUNH9

Jak widać, powinniśmy zobaczyć alert ponieważ element div jest włożona do DOM. Ale wygląda na to, że kody MutationObserver nie działają. Jak mogę uruchomić kod MutationObserver?

Answer 1

Dodaj również opcję subTree, powinna działać, chcesz monitorować nie tylko dzieci dokumentu (head/body), ale to także potomkowie. (I dlatego jest ustawiony na document.body to działa).

observer.observe(document, { 
    attributes: true, 
    childList: true, 
    characterData: true, 
    subtree:true 
}); 

Fiddle

Od documentation

subtree: Ustaw na true jeśli mutacje nie tylko cel, ale także docelowego potomków mają być przestrzegane.

Więc to, co dodajesz, jest potomkiem document, a nie jego dzieckiem (lub bezpośrednim potomkiem). Jest to dziecko z body (i dlatego właśnie wspominając o childList i przy użyciu prac document.body). Musisz wspomnieć o subTree, jeśli chcesz monitorować głębokie zmiany.

Patrz także uwaga, a także:

UWAGA: Przynajmniej, liścieelementów podrzędnych, atrybutów lub characterData musi być ustawiona na true. W przeciwnym razie "Podano nieprawidłowy lub niedozwolony ciąg" zostanie zgłoszony błąd.