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

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

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

函数f（）{
试试{b=document.querySelector（“#main>header>div>div>span”）.textContent，
name=document.querySelectorAll（“#main>header>div>div>div>span”）[1]。textContent
}捕获（e）{return}
console.log（名称+”，“+b）}
间隔=设定间隔（f，1000）因为我在脚本中使用了setInterval，所以我在这个场景中通过检查childElementCount进一步使用了它-

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

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

可以使用检查节点中的更改

下面是一个例子：


const divObservable=document.getElementById（'observable'）；
const btnAdd=document.getElementById（'btn-add'）；
const btnRemove=document.getElementById（'btn-remove'）；
btnAdd.addEventListener（'单击'，（）=>{
设置超时（（）=>{
divObservable.innerHTML=`你好，世界！`；
}, 2000);
});
btnRemove.addEventListener（'单击'，（）=>{
设置超时（（）=>{
divObservable.innerHTML=''；
}, 2000);
});
const observer配置={
属性：正确，
儿童名单：是的，
子树：对，
};
const observer callback=（mutationsList，observer）=>{
for（突变列表的var突变）{
if（mutation.type==='childList'）{
log（'已添加或删除子节点'）；
}
}
};
const observer=新的变异观察者（observer回调）；
observer.observe（divObservable，observerConfig）；
console.log（“观察”）

异步添加范围
异步删除Span
返回
null
，如果找不到元素，如文档所述。在读取元素的属性之前，只需检查该值。我已经尝试过这种方法，但是null条件不会计算，代码永远不会进入这一部分；我假设是因为span元素在DOMTry和MutationObserver中还不可用