MutationObserver

MutationObserver fournit aux développeurs un moyen d'intercepter les changements dans le DOM. Il a été conçu pour remplacer Mutation Events, défini dans les spécifications DOM3 Events.

Constructeur

MutationObserver()

Constructeur pour instancier un nouvel observateur de mutation DOM.

MutationObserver(
  function callback
);

Paramètres

callback

Fonction qui sera appelée à chaque mutation DOM. L'observateur va appeler cette fonction avec deux arguments. Le premier est un tableau d'objets du type  MutationRecord. Le deuxième est l'instance du MutationObserver.

Méthodes d'instanciation

observe()

Inscrit l'instance du MutationObserver afin d'être notifié des mutations DOM du noeud sélectionné.

void observe(
  Node target,
  MutationObserverInit options
);

Paramètres

target

Le Node (noeud) sur lequel doivent être observées les mutations DOM.

options

Un objet du type MutationObserverInit. Il spécifie quelles mutations DOM sont à rapporter.

disconnect()

L'instance MutationObserver cesse de recevoir les notifications de mutations DOM. Jusqu'à ce que la méthode  observe() soit appelée à nouveau, les callbacks de l'observateur ne seront pas invoquées.

void disconnect();

takeRecords()

Vide la file des mutations enregistrées du MutationObserver et retourne son contenu. 

Array takeRecords();

Valeur de retour

Retourne un tableau de  MutationRecords.

MutationObserverInit

MutationObserverInit est un objet qui spécifie les propriétés suivantes:

MutationRecord

MutationRecord est l'objet qui sera passé à la callback de l'observateur. Il a les propriétés suivantes :

Exemple d'utilisation

L'exemple suivant est extrait de ce blog.

// select the target node
var target = document.querySelector('#some-id');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);
 
// later, you can stop observing
observer.disconnect();

Autres articles pour en savoir plus

• A brief overview
• A more in-depth discussion
• A screencast by Chromium developer Rafael Weinstein
• The mutation summary library
• The DOM standard which defines the MutationObserver interface

Compatibilité des navigateurs