观察 DOM 中的新元素（VanillaJS）答案

【问题标题】：Watch DOM for new elements (VanillaJS)观察 DOM 中的新元素（VanillaJS）
【发布时间】：2016-03-29 13:05:19
【问题描述】：

我正在开发一个 Chrome 扩展程序，它会解析 DOM 并根据某些条件转换一些文本节点。我使用的是纯 Javascript，即没有 jQuery 或其他框架，我想保持这种方式。

如何查看 DOM 中是否有新的动态插入元素，以便我也可以在它们上运行解析器？

同样，请不要推荐任何 jQuery 解决方案，或使用纯 Javascript 以外的任何解决方案。

【问题讨论】：

标签： javascript google-chrome dom

【解决方案1】：

由于几个原因（解释如下），接受的答案实际上不起作用。

相反，我建议这样做：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    mutation.addedNodes.forEach(function(addedNode) {
      // Do things to `addedNode` here
    });
  });
});

observer.observe(document.body, {childList: true, subtree: true});

...因为，正如 miniml 正确指出的那样，subtree: true 需要接收添加的不是直接子元素的事件，并且传递给侦听器回调的参数是 array MutationRecords.

另外，我选择了document.body 作为我的观察根，因为我不认为大多数人都对监听动态插入到<head> 中的元素感兴趣。（但如果是需要，然后只需将 document.body 替换为 document.documentElement 或只是 document。）

有趣的旁注：在接受的答案中，监听器真正触发的唯一一次是如果有人从字面上删除了 <html> 元素和/或之后重新创建它。而已。（因为文档对象是only allowed to have one Element child。）

【讨论】：

【解决方案2】：

如果您的目标是现代浏览器，那么您应该使用Mutation Observers。要在将新节点插入文档时执行某些操作，您将有代码：

var domInsertionObserver = new MutationObserver(function(mutation){
  for (var node = 0; node < mutation.addedNodes.length; node++) { 
    //do what you need to do with the added nodes
  }
});
domInsertionObserver.observe(document, { childList: true });

【讨论】：

看起来应该将subtree: true添加到配置中，以便观察者监听整个document树的变化，而不仅仅是document的直系子级。
此外，回调函数接收一个突变对象数组，而不是示例中显示的单个对象。