Warum wird der MutationObserver-Code nicht in Chrome 30 ausgeführt?

Question

Von http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers habe ich den folgenden Code:

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

Wie Sie sehen können, haben wir eine Benachrichtigung, weil ein div Element auf das DOM sehen sollte eingeführt wird. Aber es scheint, MutationObserver-Codes laufen nicht. Wie kann ich den MutationObserver-Code erfolgreich ausführen lassen?

Answer 1

Hinzufügen subTree Option auch, es sollte funktionieren, möchten Sie nicht nur Kinder des Dokuments (head/body) zu überwachen, aber es ist auch Nachkommen. (Und das ist der Grund, wenn document.body es funktioniert).

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

Fiddle

Von documentation

Teilbaum: Wird auf true gesetzt, wenn Mutationen zielen nicht nur auf, sondern auch Nachkommen des Ziels sind einzuhalten.

Also was Sie hinzufügen, ist ein Nachkomme des document nicht sein Kind (oder direkter Nachkomme). Es ist ein Kind von body (und deshalb nur erwähnt childList und document.body funktioniert). Sie müssen subTree erwähnen, wenn Sie die Änderungen tief überwachen möchten.

Siehe auch die Notiz auch:

HINWEIS: Am allerwenigsten, childlist, Attribute oder Character muss auf true gesetzt werden. Andernfalls wird der Fehler "Eine ungültige oder ungültige Zeichenfolge wurde angegeben" ausgegeben.