未动态修改的页面中MutationObserver的用法

问题描述

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

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

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

我的测试似乎表明确实如此。当我观察Observer观察到 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>

解决方法

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

否，与页面加载事件无关。

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

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

这取决于在观察document.body时在何处调用observe（）函数。

如果在头部调用它，它将观察到身体的整个加载过程。

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

dom javascript mutation-observers