我需要从网站"x"选择一个元素，但网站加载元素"x"太慢

Question

我正在尝试从网站选择一个表元素，并且我正在使用document.queryselectorall((来做到这一点。但是，我认为该网站正在从另一个网络中检索该数据，并花时间这样做。因此，当我尝试使用querySelectorall((时，它以未定义的形式出现。

我已经尝试添加一些事件侦听器，例如window.addeventlistener(" load"(，document.addeventlistener(" domcontentloaded(和window.onload((= funciton((。

我认为这些事件听众不起作用，因为从技术上讲，窗口/DOM内容都已正式加载，但是我需要的表稍后才插入。有什么方法可以等待表加载，以便我可以访问它？

Answer 1

您可以使用 mutation observer来收听对代码运行时元素(或祖先(的儿童列表(可能是subtree(的更改(在最坏的情况下，在最坏的情况下， body(，然后当观察者被调用时，检查元素x。

实时示例：

// Example if you need to use an ancestor
const ob = new MutationObserver(records => {
    const div = document.querySelector(".the-element");
    if (div) {
        ob.disconnect();
        console.log("Got it");
    }
});
ob.observe(
  document.getElementById("ancestor"),
  {
    childList: true,
    subtree: true // Only need this if it's an ancestor
  }
);
// Simulates loading the element later
setTimeout(() => {
  const div = document.createElement("div");
  div.className = "the-element";
  div.textContent = "I'm the element";
  document.getElementById("parent").appendChild(div);
}, 800);

<div id="ancestor">
  <div id="parent">
    Parent
  </div>
</div>