javascript - 在未动态修改的页面中使用 MutationObserver

问题描述

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

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

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>

标签： javascriptdommutation-observers

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

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

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

您将看到唯一的变化是在标签</script>和</body>.

javascript - 在未动态修改的页面中使用 MutationObserver

问题描述

解决方案

推荐阅读