观察 DOM 中的新元素（VanillaJS）

Question

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

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

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

Answer 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需要收到不属于直接的儿童添加元素的事件，并传递给听者回调的参数是一个数组的MutationRecord秒。

此外，我选择document.body我的观察根，因为我不认为监听元素动态插入到你<head>是大多数人有兴趣。（但如果是需要的，那么只需更换document.body用document.documentElement或只document）。

有趣的旁注：在接受的答案中，监听器真正触发的唯一时间是有人真的删除了<html>元素和/或之后重新创建了它。就是这样。（因为文档对象只允许有一个 Element child。）