如何使用 MutationObserver 观察整个身体？ [复制]答案

【问题标题】：How can I observe the whole body with MutationObserver? [duplicate]如何使用 MutationObserver 观察整个身体？ [复制]
【发布时间】：2017-12-20 09:59:14
【问题描述】：

我希望在另一个脚本将div 添加到body 时调用某个函数。

我试过了：

var dom_observer = new MutationObserver(function(mutation) {
    console.log('function called');
});
var container = document.body;
console.log(container);
var config = { attributes: true, childList: true, characterData: true };
dom_observer.observe(container, config);

我尝试将container 设置为document.body（上面的示例）和document.querySelector('body')。在这两种情况下，console.log() 都显示null，我收到以下错误：TypeError: Argument 1 of MutationObserver.observe is not an object.。将div 添加到body 时未调用回调函数。

我尝试将其设置为 document.getElementsByTagName("body")[0] 和 document.documentElement.childNodes[1]。在这两种情况下，console.log() 都显示undefined 并且回调函数仍然没有被调用。

【问题讨论】：

你什么时候调用这个脚本？你的 DOM 是在那个时候加载的吗？如果console.log(document.body) 输出null，要么你不在HTML 文档中，要么标记的解析只在<head>。 Ps : 如果你还不习惯 DOM 解析和不同的加载事件，稍微延迟你对 Mutation Observer 的学习，很有可能你甚至不需要它。
谢谢，这就是解决方案。我必须将代码放入jQuery(document).ready(function{…});。修复了一切。您可以将此作为问题答案发布。

标签： javascript jquery

【解决方案1】：

问题在于您将目标设置为document，而不是container。为确保这是跨浏览器兼容的，请使用document.documentElement 和document.body。以下应该有效：

var dom_observer = new MutationObserver(function(mutation) {
    console.log('function called');
});
var container = document.documentElement || document.body;
console.log(container);
var config = { attributes: true, childList: true, characterData: true };
dom_observer.observe(container, config);

Working JSFiddle

【讨论】：

@RoryMcCrossan 小提琴确实有效。使用document 而不是container 时请查看控制台。我什至在事后添加了一些东西来测试它。
@Louis-MarieMatthews 查看我的更新答案。
谢谢，问题实际上来自于我的脚本被调用的事实，即使 DOM 没有完全加载。将代码放入jQuery(document).ready(function{…}); 解决了所有问题。但是我错了，Firefox 支持document.body。使用更新后的代码实际上会阻止脚本工作。
哦，那好吧。
document 是MutationObserver.observe() 的有效节点。 OP 的问题是他们没有在观察者中使用subtree:true。