Savoir quand un élément est modifié avec la méthode moderne MutationObserver

Avant la création de MutationObserver, on sondait frénétiquement le DOM avec un setTimeout, ce qui était inefficace et ralentissait le navigateur. Il y a eu aussi une spécification nommée MutationEvent mais c'était pas top et elle a été abandonnée au profit de MutationObserver.

Maintenant, on demande au navigateur d'appeler une fonction quand un nœud est modifié (ses enfants, ses attributs, etc. voir la liste complète sur MDN MutationRecord). On passe la fonction en paramètre de new MutationObserver et cette fonction reçoit en paramètre la liste des mutations et l'objet observer, ce qui permet d'arrêter d'observer si besoin.

Enfin, pour lancer l'observation, on appelle la méthode observe de l'objet MutationObserver qu'on vient de créer, en lui passant en paramètres le nœud à observer, et les options comme par exemple "surveille aussi les enfants de ce nœud" et/ou "surveille les attributs" (ou même certains attributs seulement) et/ou "surveille le contenu texte" etc. (voir la liste complète sur MDN MutationObserver.observe())

Ce qui donne par exemple, en compactant/simplifiant au maximum :

Pour pouvoir essayer ça, il faut maintenant qu'il se passe quelque chose dans la page. Par exemple, si je clique sur ce bouton→ je vais changer la couleur de fond de ce paragraphe en jaune.

Mon MutationObserver va se déclencher une seule fois puisque je le déconnecte dans le code de ma fonction de rappel (callback function). CQFD.

(pour IE11 il ne faut pas utiliser de fonction fléchée mais une bonne vieille fonction, ni d'instruction for...of mais une bonne vieille boucle for)