如何检查动态元素是否可用/已加载？答案

【问题标题】：How to check if dynamic elements are available/loaded yet?如何检查动态元素是否可用/已加载？
【发布时间】：2019-06-11 17:54:19
【问题描述】：

我有一个使用 document.querySelector() 从 div/span 元素中检索文本内容的 javascript - 这些是动态加载的。例如，用户名在 DOM 中始终可用。当用户上线时，会创建一个额外的 span，指示他当前登录的 IP 地址；一旦用户退出，它就会消失。

因此，当 IP 位置元素在 DOM 中不可用时，console.log 不会打印任何内容 -

function f(){
try{ b=document.querySelector("#main > header > div>div>span").textContent,
   name=document.querySelectorAll("#main > header > div>div>div>span")[1].textContent
}catch(e){return}

   console.log(name + ", " + b)}

interval=setInterval(f,1000);

我想捕捉用户每次登录，并触发IP定位元素显示；或者我想编写 if 条件来检查 IP 位置范围是否已在 DOM 中创建。请注意，该脚本还运行 setInterval() 来检查用户何时在线。

【问题讨论】：

querySelector() 返回 null 如果没有找到元素，如文档所述。只需在读取元素的属性之前检查该值即可。
我已经尝试过这种方法，但是 null 条件不评估，代码永远不会进入这部分；我假设是因为 span 元素在 DOM 中尚不可用
试试 MutationObserver developer.mozilla.org/en-US/docs/Web/API/MutationObserver

标签： javascript dom

【解决方案1】：

您可以使用MutationObserver 来检查节点中的更改。

这是一个例子：

const divObservable = document.getElementById('observable');
const btnAdd = document.getElementById('btn-add');
const btnRemove = document.getElementById('btn-remove');

btnAdd.addEventListener('click', () => {
	setTimeout(() => {
  	divObservable.innerHTML = `<span>Hello, World!</span>`;
  }, 2000);
});

btnRemove.addEventListener('click', () => {
	setTimeout(() => {
  	divObservable.innerHTML = '';
  }, 2000);
});

const observerConfig = {
  attributes: true,
  childList: true,
  subtree: true,
};
const observerCallback = (mutationsList, observer) => {
  for (var mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
};
const observer = new MutationObserver(observerCallback);

observer.observe(divObservable, observerConfig);
console.log('observing');

<div id="observable"></div>
<button id="btn-add">Async Add Span</button>
<button id="btn-remove">Async Remove Span</button>

如果IP位置存在与否，只需检查childList突变。

【讨论】：

【解决方案2】：

因为我在我的脚本中使用了 setInterval，所以我在这个场景中通过检查 childElementCount 来进一步使用它 -

target=document.getElementsByClassName("_3V5x5")[0].childElementCount;

if(target===2){
  //IP location may be available now
} else {
  // User is offline
}

【讨论】：