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

Posted 2023-02-19

【中文标题】为啥 MutationObserver 代码不能在 Chrome 30 上运行？

【英文标题】：Why doesn't MutationObserver code run on Chrome 30?为什么 MutationObserver 代码不能在 Chrome 30 上运行？

【发布时间】：2013-10-09 15:15:03

【问题描述】：

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

【问题讨论】：

是的，如果你观察 document.body 它将起作用..

@plalx 我尝试了new MutationObserver 和new WebKitMutationObserver。他们分享相同的结果。

@weilou，不要用document.querySelector('body')，只用document.body。

@weilou 查看我的答案...它也适用于文档。

【参考方案1】：

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

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

Fiddle

来自documentation

subtree：如果不仅要观察目标的突变，还要观察目标的后代，则设置为 true。

所以你添加的是document 的后代，而不是它的孩子（或直接后代）。它是body 的孩子（这就是为什么只提到childList 并使用document.body 有效）。如果您想深入监控更改，则需要提及subTree。

另见注释：

注意：至少，childList、attributes 或 characterData 必须设置为 true。否则，会抛出“指定了无效或非法的字符串”错误。

【讨论】：

@plalx 否。如果他想在 body 深处也监控，则需要子树，例如，如果他想在这个 div 中添加另一个 div。

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

@PSL，对，我的错；）

@PSL 它在 Firefox 中不起作用。有其他选择吗？

@PS 我发现了这个问题。我不应该在 Firefox 中监视 document.body，因为 DOM 还没有准备好。 （即它是空的）在页面加载期间。相反，在正文中创建一个主 div 并观察它。我想知道为什么 Firefox 的行为与 Chrome 和 IE 不同。