突变观察者---子树

Posted 2023-02-19

【中文标题】突变观察者---子树

【英文标题】：Mutation Observers---subtree

【发布时间】：2012-05-20 13:57:03

【问题描述】：

我正在阅读此http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/1622.html，Chrome 的行为似乎与规范形成鲜明对比。如果我正确理解规范，为元素定义“子树”意味着应该报告对该元素的子树（包括元素本身）的更改。但是，在执行这段代码时，我什么也得不到。

var observer = new WebKitMutationObserver(function(e)console.log(e);)
observer.observe(document.body, subtree:true, attributes:true);
document.body.appendChild(document.createElement('div'));

我错过了什么？有人可以详细说明一下吗？ 谢谢！

【参考方案1】：

文档不清楚，但 subtree 会被忽略，除非您还指定 childList:true。

attributes 和 attributeFilter 的情况相同。

希望它仍然有帮助。

【参考方案2】：

根据this article：

childList：如果要观察目标节点的子元素（包括文本节点）的添加和删除，则设置为 true。

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

这也解释了 subtree 取决于 childList。

【讨论】：

target's child elements & target's descendants 有什么区别？

子元素是父对象下方的元素（深度1）。后代是孩子的孩子，因此可以相对于父母具有任何深度。

【参考方案3】：

在mutationObserver 配置中，至少需要设置attributes、characterData 或childList 之一true。

现在，如果你只设置childList: true，那么它将只观察目标元素的直接子元素（深度1），而不是完整的子树。

要观察完整的子树childList 和subtree 需要设置true。

例如

   childList: true,
   subtree: true

希望对你有帮助。