[Ajuda] - Como seleciono um elemento que ainda não carregou.
Eu fiz uma pesquisa e encontrei esses dois Eventos -> DOMContentLoaded e o load.
O evento DOMContentLoaded é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. O evento de load é acionado quando um recurso e seus recursos dependentes terminaram de carregar.
Estou a criar uma extensão para um game, e o elemento que eu quero usar ele aparece só depois que os eventos DOMContentLoaded E load são acionados, logo então o elemento que eu selecionei me retorna sempre undefined.
Pensei então em usar um setInterval que vai ficar chamando a minha função até que o elemento que eu quero seja carregado e funcionou (oba). Mas infelizmente eu quero adicionar um evento de click dentro desse setInterval e ele não funciona por conta do clearInterval que encerra toda a tarefa e não espera pelo click.
Eu queria sugestões, tem jeito de pegar esse elemento sem ter que usar setInterval? ou Como faço para um evento de click dentro de um setInterval? É que eu nem faço menor ideia do que pesquisar para procurar minha solução
Talvez isso aqui te ajude :
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
const targetNode = document.querySelector("body");
const observer = new MutationObserver((mutationList, observer)=> { mutationList.forEach( (mutation) => { if(mutation.type === 'childList') { console.log(mutation.addedNodes); } })
}); observer.observe(targetNode, { childList: true, });
setTimeout(() => { const someElement = document.createElement("div"); someElement.className = "some-element"; someElement.textContent = "Some Element"; document.body.appendChild(someElement); }, 1000);
Nesse link aqui https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists o rapaz diz que com o MutationObserver você não precisa de timer:
function waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
e usaria assim:
waitForElm('.some-class').then((elm) => {
console.log('Element is ready');
console.log(elm.textContent);
});
//ou usando await
const elm = await waitForElm('.some-class');