Comment utiliser l'API MutationObserver pour les modifications de nœud DOM

Voici un scénario: Rita, une rédactrice de magazine, publie un article en ligne. Elle enregistre ses modifications et voit le message “Changements sauvegardés!” À ce moment-là, elle remarque une faute de frappe qu'elle a manquée. Elle le corrige et est sur le point de cliquer “enregistrer”, quand elle reçoit un coup de fil en colère de son patron.

Une fois l'appel terminé, elle retourne à l'écran et voit “Changements sauvegardés!” arrête son ordinateur et sort du bureau.

Mis à part mon inaptitude à raconter des histoires, nous avons remarqué, à partir de ce court scénario, les problèmes causés par ce message persistant. Donc, à l’avenir, nous décidons de l’éviter lorsque cela est possible et d’en utiliser un qui invite l’utilisateur à reconnaître en cliquant dessus - ou disparaît tout seul. Utiliser le second pour un message rapide est une bonne idée.

Nous savons déjà comment faire disparaître un élément d'une page, cela ne devrait donc pas poser de problème. Ce qu'il faut savoir, c'est quand est-il apparu? Nous pouvons donc le faire disparaître après un temps plausible.

API MutationObserver

Globalement, lorsqu'un élément DOM (comme un message) div) ou tout autre changement de noeud, nous devrions pouvoir le savoir. Pendant longtemps, les développeurs ont dû s’appuyer sur des hacks et des frameworks en raison de l’absence d’API native. Mais cela avait changé.

Nous avons maintenant MutationObserver (anciennement événements de mutation). MutationObserver est un objet JavaScript natif avec un ensemble de propriétés et de méthodes. Cela nous permet observer un changement sur n'importe quel noeud comme élément DOM, document, texte, etc. Par mutation, nous entendons l'ajout ou la suppression d'un nœud et les modifications apportées aux attributs et aux données d'un nœud.

Voyons un exemple pour une meilleure compréhension. Nous allons d’abord créer un endroit où un message apparaît au clic, comme celui que Rita a vu. Alors bien créer et lier un observateur de mutation à cette boîte de message et coder la logique pour masquer automatiquement le message. Savvy?

Remarque: Vous pouvez à un moment donné ou vous l'avez déjà demandé dans votre tête “Pourquoi ne pas simplement cacher le message de l'intérieur de l'événement de clic sur le bouton lui-même en JavaScript?” Dans mon exemple, je ne travaille pas avec un serveur. Par conséquent, le client est bien sûr responsable de montrer le message et peut le cacher trop facilement. Mais comme dans l'outil d'édition de Rita si le serveur est celui qui décide de modifier le contenu du DOM, le client ne peut que rester alerte et attendre..

Tout d'abord, nous créons la configuration pour afficher le message en cliquant sur le bouton.

 Voir le message

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Modifications enregistrées!"; / * Ajout d'un clic sur un événement * / document .querySelector ('button') .addEventListener ('click', showMsg); fonction showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'sarcelle d'hiver';  

Une fois la configuration initiale en cours d’exécution, procédons comme suit:

• Créer un MutationObserver objet avec une fonction de rappel définie par l'utilisateur (la fonction est définie ultérieurement dans l'article). La fonction sera exécutée sur chaque mutation observée par le MutationObserver.
• Créez un objet de configuration pour spécifier le type de mutations à observer par le MutationObserver.
• Lier le MutationObserver à la cible, qui est le 'msg' div dans notre exemple.

(function startObservation () var / * 1) Créer un objet MutationObserver * / observer = new MutationObserver (fonction (mutations) mutationObserverCallback (mutations);), / * 2) Créer un objet de configuration * / config = childList: vrai; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Vous trouverez ci-dessous une liste des propriétés du config objet identifiant les différents types de mutations. Comme dans notre exemple, nous ne traitons qu’un nœud de texte enfant créé pour le texte du message, nous avons utilisé le childList propriété.

Types de mutations observées

Maintenant, à cette fonction de rappel qui est exécutée sur chaque mutation observée.

fonction mutationObserverCallback (mutations) / * Récupère la première mutation * / var mutationRecord = mutations [0]; / * Si un noeud enfant a été ajouté, masquez le message après 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'aucun'; 

Puisque nous ajoutons seulement un message au div, nous allons simplement récupérer la première mutation observée et vérifier si un nœud de texte a été inséré. Si nous avons plus d’un changement en cours, nous pouvons simplement parcourir le mutations tableau.

Chaque mutation dans le mutations tableau est représenté par l'objet MutationRecord avec les propriétés suivantes.

Propriétés de MutationRecord

Et c'est tout. nous devons juste mettre le code ensemble pour la dernière étape.

Prise en charge du navigateur

Référence

• “Observateur de mutation W3C DOM4.” W3C. Web. 19 juin 2015
• “MutationObserver.” Réseau de développeurs Mozilla. Web. 19 juin 2015.