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 s。

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

有趣的旁注：在接受的答案中，听众根本不会实际开火的唯一时间是，如果有人真正删除了<html>元素和/或之后重新创建它。就是这样。（因为文档对象是only allowed to have one Element child。）

Answer 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 });

观看DOM以获取新元素（VanillaJS）

2 个答案: