Comment puis-je attendre efficacement qu'un élément existe en JavaScript ?

En attente de l'existence d'un élément

Le développement Web implique souvent des pages Web mises à jour dynamiquement où des éléments apparaissent ou disparaissent. Il devient donc essentiel de déterminer quand un élément spécifique devient disponible. Dans cet article, nous allons explorer une solution robuste utilisant l'API MutationObserver pour attendre qu'un élément existe.

MutationObserver : une solution native

L'API MutationObserver fournit un moyen polyvalent pour surveiller les changements du DOM. Il nous permet de créer un observateur qui surveille des éléments spécifiques ou l'ensemble du document et nous avertit chaque fois qu'il y a des changements qui correspondent à nos critères.

Mise en œuvre de la solution

Ce qui suit l'extrait de code présente l'implémentation de waitForElm function:

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

Utilisation

Pour utiliser la fonction waitForElm, passez simplement le sélecteur de l'élément souhaité. Une promesse est renvoyée, qui se résout lorsque l'élément devient disponible :

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

Avantages

Cette solution offre plusieurs avantages par rapport aux méthodes d'interrogation traditionnelles ou aux méthodes intégrées de jQuery :

• Efficace : Pas d'interrogation inutile, système de conservation ressources.
• Précis : Déclenchement garanti lorsque l'élément existe réellement.
• Natif : Pas de bibliothèques tierces ni de dépendances lourdes.
• Prend en charge async/await : Intégration transparente avec l'asynchrone moderne programmation.

En tirant parti de l'API MutationObserver, vous pouvez efficacement attendre que des éléments existent dans vos applications Web, garantissant ainsi des actions fiables et opportunes.

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!