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

从http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers我得到了下面的代码：为什么MutationObserver代码不能在Chrome 30上运行？

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代码？

来源

2013-10-03 weilou

是的，如果你观察document.body，它会工作.. – PSL

@plalx我试过'新的MutationObserver'和'新的WebKitMutationObserver'。他们有相同的结果。 – weilou

@weilou，不要使用'document.querySelector（'body'）'，只需使用'document.body'。 – plalx

添加subTree选项以及它应该工作，你不仅要监视文档的子项（head/body），但它也是后代。（这就是设置为document.body的原因）。

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

Fiddle

从documentation

子树：设置为true，如果突变不只是目标，而且目标的后裔也必须得到遵守。

因此，您要添加的是document的后代，而不是其子代（或直接后代）。它是body（这就是为什么只提到childList和使用document.body作品）的孩子。如果要深入监视更改，则需要提及subTree。

另见注释以及：

注意：最起码，childList中，属性或characterData必须设置为true。否则，将抛出“指定了无效或非法字符串”错误。

来源

2013-10-03 04:04:54 PSL

@plalx号子树是必需的，如果他想要监视身体深处的话，例如，如果他想在这个div内添加其他div。 – PSL

@plalx检查此示例删除子树并尝试。 http://jsfiddle.net/9wtDc/ – PSL

最后我加了'subtree'。现在它起作用了。感谢你们。 – weilou

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

回答

相关问题