MutationObserver 在非动态修改的页面中的使用

Question

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

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

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

我的测试似乎表明它是。当我观察 document.body 且 childList 为 true 时，Observer 总是至少获得一条记录，其中包括文档的整个主体。但是，我想要一个明确的答案，最好是来自文档（我找不到），因为这可能在某种程度上取决于浏览器。

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

<!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>

Answer 1

Is a MutationObserver supposed to trigger on page load, at least once, when the DOM is parsed, even if there is no JS that adds or removes nodes?

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

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

您会看到唯一的变化是在标签 </script> 和 </body> 之间添加了一个包含 spaces/newlines 的文本节点。

Answer 2

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

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

如果在正文末尾调用它，它不会观察到已加载的正文部分。

MutationObserver 在非动态修改的页面中的使用

Usage of MutationObserver in a page that is not dynamically modified

javascript

dom

mutation-observers