Comment puis-je attendre efficacement l'existence d'un élément en JavaScript ?

Attendre l'existence d'un élément avec MutationObserver

Comme vous l'avez constaté lors du développement de votre extension Chrome, il est crucial de savoir quand un élément devient disponible sur la page. Bien que l’utilisation d’intervalles pour vérifier son apparence soit une approche courante, elle peut s’avérer inefficace. Heureusement, jQuery ne fournit pas de solution simple.

Une alternative moderne et efficace consiste à utiliser l'API MutationObserver. Cela vous permet de créer une fonction JavaScript qui écoute les modifications dans l'arborescence DOM :

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)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

Cette fonction prend un sélecteur en entrée et renvoie une promesse qui se résout lorsque l'élément est trouvé.

Pour l'utiliser, vous pouvez écrire :

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

Ou, avec async/await :

const elm = await waitForElm('.some-class');

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!