Как проверить, доступны ли / загружены ли динамические элементы?

Question

У меня есть JavaScript, который использует document.querySelector () для извлечения текстового содержимого из элементов div / span - они загружаются динамически. Например, имя пользователя всегда доступно в DOM. Когда пользователь подключается к сети, создается дополнительный диапазон с указанием 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 () для проверки, когда пользователь находится в сети.

Answer 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>

Просто проверьте мутацию childList, существует ли IP-адрес или нет.

Answer 2

Поскольку я использую setInterval в своем сценарии, я в дальнейшем использовал его в этом сценарии, проверив childElementCount -

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

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