javascript - 如何在没有jquery的情况下创建元素后执行javascript代码？

Question

我正在开发一个 Chrome 扩展，它可以修改网站中的元素。该网站在加载主文档后发送大量ajax调用以获取页面内容(GWT框架架构)。我需要修改该网页的内容，并且只有在所有 ajax 调用之后才会创建我要修改的元素。

假设我要修改的元素id是#idContainer > div > div.container.container\--wider.\\30，完成后才可用ajax 调用。

那么如何在该元素可用后执行 js 代码(通过 chrome 扩展 -> 内容脚本)。

注意: 我在 stackOverflow 中看到了很多类似的问题，但如果不使用 jQuery，没有一个问题能得到答案。

Answer 1

考虑使用Mutation Observer 。这是我的一些项目的示例，我必须解决完全相同的问题。

// observer callback
const callback = (mutations) => {
  const matching = [];
  for (const {addedNodes} of mutations) { // for each mutation
    for (const node of addedNodes) { // iterate through all added nodes
      if (node.nodeType !== Node.ELEMENT_NODE) {
        continue; // only react to real element nodes
      }
      if (node.children[0]) { // Here you can check for what you want
        matching.push(...node.getElementsByTagName('pre'));
      }
    }
  }
  if (matching.length === 2) { // I needed the second pre tag
    ipcRenderer.send('note-result', matching[1].innerText);
  }
};

// intialize the observer with the callback
const observer = new MutationObserver(callback);
// pass a targetNode and an options object in the observe method
observer.observe(document.body, {attributes: true, childList: true, subtree: true}); 

在此示例中，我对 DOM 中出现的第二个“pre”标签的 textContent 感兴趣。

您还可以使用disconnect方法停止观察:

observer.disconnect();

您必须根据您的特定用例稍微调整代码，但这就是使用突变观察器的要点。