API MutationObserver de JavaScript

Les observateurs de mutations dans JavaScript vous permettent de surveiller les modifications du DOM et d'y réagir dynamiquement. Ce guide interactif propose une approche simple et pratique pour comprendre le fonctionnement des observateurs de mutations, avec des exemples qui illustrent visuellement les changements.

Exemple d'observateur de mutations

Voici un exemple de base pour vous aider à visualiser le fonctionnement d'un observateur de mutations en indiquant visuellement les modifications du DOM.

html

<!DOCTYPE html>
<html>
<head>
  <title>Exploring DOM Changes: Live Examples with Mutation Observers</title>
</head>
<body>
  <div id="target" style="background-color: lightgray; padding: 10px;">
    Watch this space for changes!
  </div>
  <button style="margin-top: 10px;" onclick="addNewElement(); changeAttribute();">Add New Element and Change Color</button>
  <div id="log" style="margin-top: 20px;"></div>

  <script>
    // Get the element to observe
    const targetNode = document.getElementById('target');

    // Define configurations for the observer
    const config = { attributes: true, childList: true, subtree: true, attributeOldValue: true };

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
      for (const mutation of mutationsList) {
        const message = document.createElement('p');
        if (mutation.type === 'childList') {
          message.textContent = 'A child node has been added or removed.';
          message.style.color = 'green';
        } else if (mutation.type === 'attributes') {
          message.textContent = 'The ' + mutation.attributeName + ' attribute was modified.';
          message.style.color = 'blue';
        }
        document.getElementById('log').appendChild(message);
      }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);

    // Function to add new elements
    function addNewElement() {
      const newElement = document.createElement('div');
      newElement.textContent = 'New element added!';
      targetNode.appendChild(newElement);
    }

    // Function to change attributes
    function changeAttribute() {
      const currentColor = targetNode.style.backgroundColor;
      targetNode.style.backgroundColor = currentColor === 'lightgray' ? 'lightblue' : 'lightgray';
    }
  </script>
</body>
</html>

Try it Yourself »

Cet exemple montre comment utiliser un observateur de mutations pour détecter et réagir aux modifications du Document Object Model (DOM) d'une page web. Voici ce que fait chaque partie du JavaScript et ce à quoi vous pouvez vous attendre lorsque vous interagissez avec l'exemple :

Configuration de l'observateur de mutations :
- Nœud cible : Il s'agit de l'élément DOM que vous souhaitez surveiller. Dans ce cas, c'est le div ayant l'ID target.
- Configurations : Elles spécifient les types de modifications que vous souhaitez surveiller :
  - attributes : L'observateur recherchera les modifications d'attributs (comme style ou class).
  - childList : Il vérifiera l'ajout ou la suppression d'éléments enfants (comme de nouveaux divs ajoutés).
  - subtree : Cela garantit que l'observateur vérifie non seulement l'élément cible, mais aussi ses descendants. Notez que subtree n'a d'effet que si childList ou attributes est également activé.
  - attributeOldValue : Cela enregistre la valeur précédente de tout attribut modifié (utile pour suivre les modifications).
Définir une fonction de rappel :
- Cette fonction s'exécute chaque fois que l'observateur détecte un changement en fonction des configurations définies.
- Elle parcourt toutes les mutations détectées et crée un message de journal pour chacune :
  - Si un élément enfant est ajouté ou supprimé, il consigne « Un nœud enfant a été ajouté ou supprimé. » en texte vert.
  - Si un attribut est modifié (comme la couleur de fond), il consigne « L'attribut mutation.attributeName a été modifié. » en texte bleu.
Instance de l'observateur :
- L'observateur de mutations est créé et lié à la fonction de rappel.
Démarrer l'observation :
- L'observateur commence à surveiller le div target pour tout changement spécifié dans les configurations.
Fonctions interactives :
- Ajouter un nouvel élément : Déclenchée par un clic sur un bouton, cette fonction ajoute un nouveau div contenant le texte « Nouvel élément ajouté ! » à l'intérieur du div target.
- Modifier un attribut : Également déclenchée par le même clic de bouton, cette fonction alterne la couleur de fond du div target entre 'lightgray' et 'lightblue'. Remarque : Bien que onclick en ligne fonctionne pour cet exemple, l'utilisation de addEventListener est recommandée pour une meilleure séparation du code en production.

Résultats attendus :

Ajout d'un nouvel élément :
- Chaque fois que vous cliquez sur le bouton, un nouveau div est ajouté. Cela déclenche la vérification childList de l'observateur, et vous verrez un message vert indiquant « Un nœud enfant a été ajouté ou supprimé. »
Modification d'un attribut :
- Le même clic sur le bouton modifiera la couleur de fond du div target. Cela déclenche la vérification des attributs de l'observateur. Vous verrez un message bleu indiquant quel attribut a été modifié (« L'attribut style a été modifié. »).

Cet exemple démontre efficacement comment les observateurs de mutations peuvent être utilisés pour surveiller et consigner les modifications du DOM, fournissant un retour en temps réel sur ce qui se passe au sein de la page web.

Conclusion

Les observateurs de mutations constituent un élément essentiel de la boîte à outils JavaScript, offrant des solutions dynamiques pour gérer efficacement les modifications du DOM. Ils permettent aux développeurs de créer des applications web réactives et interactives qui réagissent de manière transparente aux interactions utilisateur et aux modifications programmatiques du DOM. Bien qu'ils soient puissants, il est essentiel d'utiliser les observateurs de mutations avec discernement pour maintenir des performances optimales et une bonne expérience utilisateur. En sélectionnant soigneusement les mutations à observer, en minimisant la surcharge dans les fonctions de rappel de mutation, et en appelant observer.disconnect() lorsque l'observateur n'est plus nécessaire pour éviter les fuites de mémoire, les développeurs peuvent tirer parti des observateurs de mutations pour améliorer les fonctionnalités du site sans compromettre l'efficacité. Comprendre et appliquer ces principes permet de créer des interfaces web avancées et conviviales qui se démarquent dans le paysage numérique moderne.

Pratique

Parmi les affirmations suivantes, lesquelles sont vraies concernant l'observateur de mutations JavaScript ?

Les observateurs de mutations peuvent être utilisés pour détecter les modifications du DOM, comme l'ajout ou la suppression d'éléments.Les observateurs de mutations empêchent automatiquement les actions par défaut pour toutes les modifications du DOM qu'ils détectent.Vous pouvez spécifier quels types de mutations doivent être signalés à l'observateur, tels que les attributs, childList ou les modifications de subtree.Les observateurs de mutations fournissent un rappel synchrone pour gérer les modifications du DOM.Une utilisation intensive des observateurs de mutations peut impacter les performances d'une application web si elle n'est pas gérée avec soin.

API MutationObserver de JavaScript ​

Exemple d'observateur de mutations ​

Résultats attendus : ​

Conclusion ​

Pratique ​

API MutationObserver de JavaScript

Exemple d'observateur de mutations

Résultats attendus :

Conclusion

Pratique