Observer l’ajout/le retrait d’une classe d’un élément | jQuery/js

Observer le changement du DOM
Observer le changement du DOM

Pour observer un changement dans le DOM, on utilise MutationObserver, un moyen de réagir au changement du DOM, et qui remplace MutationEvents défini dans la specification DOM3 Events.

Le constructeur MutationtObserver() permet d’instancier des objets DOM mutation observers. Une fonction de callback est appelée à chaque changement du DOM.

observe() permet de définir une instance de MutationObserver pour recevoir des notifications en cas de changement du DOM sur l’élément spécifié.

Les options sont :

Property Description
childList Set to true if additions and removals of the target node’s child elements (including text nodes) are to be observed.
attributes Set to true if mutations to target’s attributes are to be observed.
characterData Set to true if mutations to target’s data are to be observed.
subtree Set to true if mutations to target and target’s descendants are to be observed.
attributeOldValue Set to true if attributes is set to true and target’s attribute value before the mutation needs to be recorded.
characterDataOldValue Set to true if characterData is set to true and target’s data before the mutation needs to be recorded.
attributeFilter Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.

On désire détecter l’ajout ou le retrait d’une classe sur un élément. La classe est class-to-observe, et l’élément a l’id elId.

Et si l’on veut en faire un plugin :

On utilise alors :

Il faut obligatoirement que val soit défini et qu’une fonction de callback existe. Sinon, le plugin ne fait rien.

Et hop, un moyen pour détecter un changement de classe d’un élément.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *