Executando verificação de segurança...
1
nelsonmatenda
1 min de leitura ·

[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

Carregando publicação patrocinada...
2
CarlosZiegler

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);

1
2
duanyespindola

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');
2