Observateurs de mutation

De nombreux sites et applications créent leurs propres contrôles personnalisés avec HTML et JavaScript. Ces contrôles ne sont pas intrinsèques comme ceux fournis par l’élément input. Pour bien fonctionner avec le reste de la plateforme Web, ces contrôles doivent pouvoir s’adapter aux modifications du contenu, répondre aux événements et gérer l’interaction utilisateur. Les applications et les sites doivent surveiller le modèle DOM afin de détecter les mutations et répondre en conséquence.

Dans Internet Explorer 11, les développeurs Web bénéficient de la prise en charge des observateurs de mutation DOM4 du W3C. Grâce aux observateurs de mutation, les développeurs Web peuvent surveiller les mutations DOM, et déterminer celles qu’ils doivent observer et suivre. Par exemple, ils peuvent recevoir une notification après l’exécution d’un script (avant qu’un nouveau cadre soit peint à l’écran).

Les observateurs de mutation offrent une solution rapide de remplacement de tous les scénarios pris en charge par les événements de mutation et une alternative aux scénarios pris en charge par les événements de modification de propriété. Pour plus d’informations, voir "Migration des événements de modification de propriété et de mutation vers les observateurs de mutation".

L’objet MutationObserver

Un objet MutationObserver sert à surveiller et à enregistrer les modifications spécifiées sur un ou plusieurs nœuds DOM. Vous pouvez entre autres observer les types de modifications suivants :

  • Ajouts et suppressions de nœuds enfants
  • Ajouts, suppressions et modifications d’attributs
  • Modifications de valeurs de nœuds de texte enfants

Le constructeur MutationObserver nécessite une fonction de rappel qu’il utilise pour vous informer des mutations :


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

Après avoir créé un objet MutationObserver, utilisez la méthode observe pour l’enregistrer sur le ou les nœuds que vous souhaitez surveiller et pour spécifier les types d’informations à recueillir :


// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});


Vous pouvez surveiller et collecter les types suivants d’informations :

Option MutationObserverDescription

childList

A la valeur true pour surveiller les ajouts et suppressions des éléments enfants du nœud. Cette option inclut les nœuds de texte qui sont ajoutés ou supprimés comme enfants de l’élément cible. Exemple :

{ childList: true }

attributes

A la valeur true pour surveiller les modifications (ajouts, suppressions et modifications de valeurs) apportées aux attributs du nœud cible. Exemple :

{ attributes: true }

characterData

A la valeur true pour surveiller les modifications apportées à la valeur du contenu texte du nœud cible (nœuds de texte enfants). Exemple :

{ characterData: true }

subtree

A la valeur true pour surveiller aussi les modifications apportées à tous les descendants du nœud cible (childList, attributes ou characterData doit aussi avoir la valeur true). Exemple :

{ childList: true, subtree: true }

attributeOldValue

A la valeur true pour enregistrer la valeur d’attribut précédente du nœud cible (attributes doit aussi avoir la valeur true). Exemple :

{ attributes: true, attributeOldValue: true }

characterDataOldValue

A la valeur true pour enregistrer les données texte précédentes du nœud cible (characterData doit aussi avoir la valeur true). Exemple :

{ characterData: true, characterDataOldValue: true }

attributeFilter

A comme valeur un tableau de noms locaux d’attributs (sans espace de noms) de façon à surveiller uniquement les modifications apportées à des attributs spécifiques (attributes doit aussi avoir la valeur true). Exemple :

{ attributes: true, attributeFilter: ["id", "dir"] }

 

Quand une mutation pertinente se produit, l’objet MutationObserver enregistre les informations de modification que vous avez demandées dans un objet MutationRecord et appelle votre fonction de rappel, mais pas avant que tous les scripts dans la portée actuelle aient été exécutés. Il est possible que plusieurs mutations (chacune représentée par un MutationRecord unique) aient eu lieu depuis le dernier rappel.


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


Votre fonction de rappel est appelée avec deux paramètres :

  • Un tableau d’objets MutationRecord représentant les modifications qui se sont produites sur le ou les éléments
  • Une référence à l’objet MutationObserver ayant appelé le rappel

L’objet MutationRecord

Vous pouvez inspecter des objets MutationRecord spécifiques pour identifier le type et le contenu de la modification :


// Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}

Un objet MutationRecord fournit les informations suivantes :

Propriété MutationRecordDescription

type

Extrait le type de mutation représenté par MutationRecord.

attributes

Un attribut a changé sur le nœud cible.

characterData

La valeur du contenu texte (un nœud de texte enfant) du nœud cible a changé.

childList

Un enfant (ou un descendant dans l’arborescence) du nœud cible a été ajouté ou supprimé.

target

Extrait le nœud sur lequel le MutationRecord a été enregistré.

addedNodes

Extrait un tableau de nœuds qui ont été ajoutés. Le tableau est vide si aucun nœud n’a été ajouté.

removedNodes

Extrait un tableau de nœuds qui ont été supprimés. Le tableau est vide si aucun nœud n’a été supprimé.

previousSibling

Extrait le frère précédent du nœud qui a été ajouté ou supprimé, ou null s’il n’en existe aucun (ou si MutationRecord.type n’est pas childList).

nextSibling

Extrait le frère suivant du nœud qui a été ajouté ou supprimé, ou null s’il n’en existe aucun (ou si MutationRecord.type n’est pas childList).

attributeName

Extrait le nom de l’attribut qui a été ajouté, supprimé ou modifié (ou sinon null).

attributeNamespace

Extrait l’espace de noms de l’attribut qui a été ajouté, supprimé ou modifié (ou sinon null).

oldValue

Extrait la valeur précédente de l’attribut ou characterData qui a subi une mutation (ou sinon null).

 

Le tableau d’objets MutationRecord de MutationObserver accumule toutes les modifications pertinentes jusqu’à ce que la méthode takeRecords soit appelée, méthode qui supprime les enregistrements de la file d’attente et les renvoie.

Pour arrêter la surveillance des modifications, appelez la méthode disconnect de MutationObserver. Veillez tout d’abord à appeler la méthode takeRecords si vous devez enregistrer vos données de mutation. Elles ne sont pas conservées une fois que vous avez déconnecté un MutationObserver de ses éléments cibles.

Bien qu’il soit possible de réutiliser une instance de MutationObserver une fois que vous l’avez déconnectée de ses éléments cibles précédents, sa fonction de rappel ne peut pas être modifiée et les options relatives à l’enregistrement des modifications et aux éléments cibles devront être réenregistrées à l’aide de la méthode observe.

Rubriques connexes

Migration des événements de modification de propriété et de mutation vers les observateurs de mutation

 

 

Afficher:
© 2014 Microsoft