Retourner à la page d'accueil de TJS

Objet : MutationObserver

Constructeur d'un observateur de changements dans le DOM

Syntaxe
observateur = new MutationObserver(function checkMutation);

Compatible tous navigateurs
ES6
ECMAScript 2015

Description
Construit l'objet observateur de type MutationObserver.
La fonction checkMutation() reçoit en paramètre un ensemble de mises à jour du DOM et peut lancer des traitements selon leur type.
La méthode observe() active l'observateur sur un noeud du document et définit les modifications à détecter.
La méthode disconnect() suspend l'observateur.


Exemple 1 : Détection de changement dans le DOM
Code source
<div id="noeud">Noeud initial</div>

<div>
<button onclick="noeud.innerText='Nouveau contenu' ">Changer le contenu</button>
<button onclick="noeud.style='border: 2px solid #000' ">Ajouter un attribut</button>
</div>

<script>

var observateur = new MutationObserver(function checkMutation(mutationsList) {
 /* Parcourir l'ensemble mutationsList pour identifier les changements à traiter */
 for (let mutation of mutationsList) {
  console.log(mutation); /* Affiche la mutation de type MutationRecord */
 }

});

var noeud = document.getElementById("noeud")
var configObservateur = {
 attributes: true,
 childList: true
}

observateur.observe(noeud, configObservateur);

</script>

Résultat
Noeud initial
Emulation de la console
Explication
Détecte les changements dans le div#noeud.
Le changement du contenu émet un MutationRecord de type childList.
L'ajout d'un attribut style émet un MutationRecord de type attributes.
Page mise à jour le

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 25/05/2022 05:37:52 sur php7 en 34.39 ms