为什么MutationObserver代码不能在Chrome 30上运行？

Question

从http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers我得到以下代码:

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

如您所见,我们应该看到一个警报,因为div元素已插入DOM.但看起来MutationObserver代码不会运行.如何成功运行MutationObserver代码？

Answer 1

添加subTree选项,它应该工作,你不仅要监视document(head/body)的子项,还要监视它的后代.(这就是设置document.body它的原因).

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

小提琴

从文档

子树:如果要突变不仅仅是目标,而且还要观察目标的后代,则设置为true.

所以你要添加的是document不是它的孩子(或直系后代)的后代.它是一个孩子body(这就是为什么只提及childList和使用document.body作品).您需要提及subTree是否要深入监控更改.

另请参阅说明:

注意:至少,childList,attributes或characterData必须设置为true.否则,抛出"指定了无效或非法字符串"错误.