Question

我正在编写一个chrome扩展，我想要获取页面上存在的所有图像，但是一些图像会在一段时间后加载（可能是通过ajax），一旦DOM空闲，我就无法获取它们。有没有办法在页面加载后跟踪DOM更改？

Answer 1

您可以将document.addEventListener与DOMNodeInserted事件一起使用。您的回调必须检查每个节点插入，以查看它是否是您要查找的节点类型。以下内容应该有效。

function nodeInsertedCallback(event) {
    console.log(event);
};
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);

Answer 2

2020年更新：

当今推荐的方法是使用Mutation Observer API。

 let observer = new MutationObserver(mutations => {
    for(let mutation of mutations) {
         for(let addedNode of mutation.addedNodes) {
             if (addedNode.nodeName === "IMG") {
                 console.log("Inserted image", addedNode);
              }
          }
     }
 });
 observer.observe(document, { childList: true, subtree: true });

如何跟踪chrome扩展中的DOM更改？

2 个答案: