Retourner ' la page d'accueil de TJSRetourner ' 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

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

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

Commandez en ligne

Chercher une fonction, un objet, ...

Le 26/04/2024 01:11:48 sur php 7 en 144.32 ms