Question

我有一个使用document.querySelector（）从div / span元素检索文本内容的javascript-这些是动态加载的。例如，用户名在DOM中始终可用。当用户上线时，会创建一个附加跨度，以指示当前登录用户的IP地址。用户注销后，它就会消失。

因此，当DOM中IP位置元素不可用时，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条件来检查是否在DOM中创建了IP地址范围。请注意，该脚本还会运行setInterval（）来检查用户何时在线。

Answer 1

由于我在脚本中使用了setInterval，因此在这种情况下，我通过检查childElementCount来进一步使用它-

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

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

Answer 2

您可以使用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>

只需检查childList突变是否IP地址存在。

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

2 个答案: