TagDOM

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

Attention: l’article et le code ci-dessous ne sont valables qu’au document ready. Ceci signifie qu’au chargement de la page seulement, on va vérifier la disponibilité d’un ou plusieurs éléments dans le DOM. Les sources ne concernent pas l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Pour cette deuxième fonctionnalité, se référer à la documentation de Mutation Observer sur developer.mozilla.org et un exemple d’utilisation ici: [Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur.

Source: Using Mutation Observers to Watch for Element Availability. Code source sous GIT. Version PDF pour la postérité.

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

Edit 11/02/2020: DOMSubtreeModified est désormais déprécié au profit de MutationObserver.

Mes propres expériences avec les MutationObserver:


Pour surveiller les changements sur un élément du DOM avec jQuery, on va souvent vous renvoyer vers l’utilisation de l’événement .on('change', ...) ou des MutationObserver, mais il y a plus simple avec l’événement .bind('DOMSubtreeModified', ...).

Source: jQuery watch for domElement changes?. Demo JSfiddle.net – Listen DOM Changes using jQuery.

Edit 12/07/2018: j’ai remplacé la méthode .bind() aujourd’hui dépréciée par .on().

[jQuery] Détecter un changement dans le contenu d’un élément HTML (plug-in)

Source : Stack Overflow – jQuery watch div.
Simulation JS Fiddle.

Le plug-in

Le code HTML

Utiliser le plug-in

Si le plug-in s’arrête de fonctionner après le 1er changement dans le DOM

Dans notre exemple, au clic sur une des options d’un élément HTML select :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑