在未动态修改的页面中使用 MutationObserver答案

【问题标题】：Usage of MutationObserver in a page that is not dynamically modified在未动态修改的页面中使用 MutationObserver
【发布时间】：2020-12-31 21:24:23
【问题描述】：

这似乎是一个显而易见的问题，但我在任何文档中都找不到任何明确的答案。

我想确保在第一次加载页面和通过添加或删除节点修改页面时运行函数。

MutationObserver 是否应该在页面加载时触发，至少一次，当解析 DOM 时，即使没有添加或删除节点的 JS？

我的测试似乎表明确实如此。当我让观察者观察 document.body 且 childList 为 true 时，观察者总是至少获得一条记录，其中包括整个文档正文。但是，我希望有一个明确的答案，最好是从文档中（我找不到），因为这可能在某种程度上取决于浏览器。

这是我用来测试的简单代码：

<!DOCTYPE html> 
<head>  
  <title>Observer test</title>
</head>
<body>              
<script type='text/javascript'>
  var config = { childList: true, subtree: true };

  function mutationCallback (mutationsList, observer) {
    console.log('Triggered');
      for(let mutation of mutationsList) {
       console.log(mutation.type);
       console.log(mutation.target);
         for (let node of mutation.addedNodes) {
           console.log(node)
         }
      }
  }
  observer = new MutationObserver(mutationCallback);
  observer.observe(document.body, config);
</script>
</body>
</html>

【问题讨论】：

标签： javascript dom mutation-observers

【解决方案1】：

MutationObserver 是否应该在页面加载时触发，至少一次，当解析 DOM 时，即使没有添加或删除节点的 JS？

不，页面加载事件不相关。

观察者仅由 DOM 突变（在 JS 或 HTML 解析器中）触发，而您恰好在这里也有一个。要轻松查看它，请为整个列表添加一个 console.log：console.log(mutationsList)

您将看到唯一的变化是在标签</script> 和</body> 之间添加了一个包含空格/换行符的文本节点。

【讨论】：

这很有意义。所以我必须使用一个常规的旧页面加载事件来运行我的钩子至少一次，然后让观察者处理剩下的事情。谢谢！
所以它不会触发的唯一情况是同步添加观察者的脚本是要解析的最后一个节点，即</script></body></html>。
知道了，是的，这里就是这样。我刚刚确认，如果我删除结束标签之间的新行，那么它根本不会触发。

【解决方案2】：

这取决于你在观察 document.body 时调用 observe() 函数的位置。

如果你在head中调用它，它会观察body的整个加载过程。

如果你在 body 的末尾调用它，它不会观察 body 已经加载的部分。

【讨论】：