在ActiveTab上运行async / defer JavaScript后如何访问DOM元素?[重复]

qmelpv7a  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(95)

此问题已在此处有答案

Is there a JavaScript / jQuery DOM change listener?(5个答案)
5小时前关闭
我正在构建一个Chrome扩展,并希望注入DOM元素或修改一些。
为此,我尝试使用content.js等待DOM加载元素,然后使用它。然而,我的目标DOM元素似乎是在Async/Await调用之后构建的。
Async/Await调用完成后如何访问DOM元素?
来自我的***content.js***:

window.document.onreadystatechange = function () {
  console.log(window.document.readyState); /* "complete" */
  if (window.document.readyState === "complete") {
    console.log(window.document.getElementById('chips')); /* null */
  }
}

我的目标URL是YouTube直播:https://www.youtube.com/watch?v=gxG3pdKvlIs&ab_channel=FRANCE24(例如)。在DevConsole中运行:window.document.getElementById('chips')正确记录元素。

ktecyv1j

ktecyv1j1#

您可以使用MutationObserver API来检测元素何时被添加到DOM,然后修改它。
下面是一个示例,说明如何使用MutationObserver来检测ID为chips的元素何时被添加到DOM中:

// Create a new MutationObserver
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // Check if the element with ID 'chips' has been added to the DOM
    if (mutation.addedNodes && mutation.addedNodes.length > 0) {
      const chipsElement = document.getElementById('chips');
      if (chipsElement) {
        // Modify the element here
        console.log(chipsElement);
        // Disconnect the observer once the element has been found
        observer.disconnect();
      }
    }
  });
});

// Start observing the document for changes
observer.observe(document, { childList: true, subtree: true });

这段代码创建了一个新的MutationObserver,并开始观察文档的变化。当检测到变化时,它会检查ID为chips的元素是否已经添加到DOM中。如果已经添加,它会修改元素并断开观察者。
您可以将此代码放在content.js文件中,等待元素添加到DOM中,然后修改它。

相关问题