Les MutationObserver

Les MutationObserver

Problèmatique

En JavaScript, il arrive souvent qu’on veuille réagir à des changements dans la page :

un élément ajouté dynamiquement
un texte modifié par un script tiers
une classe CSS ajoutée/enlevée
un composant rendu après un appel API

Exemple

prenons l'exemple d'une page sur laquelle un élément apparaît plus tard

<div id="app"></div>

A présent un simple script pour ajouter du contenu après 2 secondes

setTimeout(() => {
- document.getElementById("app").innerHTML = "<p>Contenu chargé</p>";
},2000);

Tentons une approche naïve pour surveiller les changements.

const interval = setInterval(() => {
- const el = document.querySelector("#app p");
  - if (el) {
    - console.log("Élément détecté !");
    - clearInterval(interval);
    }
}, 100);

Pas mal mais cette approche devient vite inefficace dès qu'on a des interfaces dynamiques ou du contenu injecté par des scripts tiers.

elle consomme inutilement des ressources (polling)
elle est moins réactive (latence entre deux checks)
elle devient vite ingérable si tu surveilles plusieurs éléments
elle ne “réagit pas”, elle “interroge”

La solution du MutationObserver

MutationObserver fonctionne comme un "listener intelligent du DOM" qui réagit uniquement quand quelque chose change, sans vérifier en boucle.

Etape 1

récupérer notre élément

const target = document.getElementById("app");

Etape 2

Créer l'objet observer

const observer = new MutationObserver((mutations) => {
- mutations.forEach((mutation) => {
  - console.log("Changement détecté :", mutation);
    - if (target.querySelector("p")) {
      - console.log("Élément détecté !");
      - observer.disconnect(); // on arrête d'observer
  - }
- });
});

Etape 3

Pour finir, nous allons attacher notre cible avec notre observer

observer.observe(target, {
- childList: true,
- subtree: true,
});

Ce que l'on gagne

Performance
Pas de boucle infinie, pas de polling.
Réactivité
Notification immédiate quand le DOM change.
Précision
Possibilité de cibler ce que l'on veut observer :
- ajout/suppression d’enfants (childList)
- modifications d’attributs (attributes)
- changements de sous-arbre (subtree)