Détecter des modifications d'un élément HTML avec JavaScript

La fonction ElObserve() permet de détecter les modifications d'un élément HTML.

ElObserve()

Retourne un objet détecteur de modifications d'un élément HTML.

Syntaxe

new ElObserve(element, modifications);

Paramètres

element(Node)

Le paramètre element de la fonction ElObserve() définit l'élément HTML pour lequel observer des modifications.

modifications(Object)

Le paramètre modifications de la fonction ElObserve() définit les modifications à observer pour un élément HTML.
Si ce paramètre est omis, tous les types de modifications disponibles seront détectables.

Propriétés

childList(Boolean)

La propriété childList du paramètre modifications définit avec une valeur booléenne la détection de toute modification d'un élément enfant de l'élément modifié.

subtree(Boolean)

La propriété subtree du paramètre modifications définit avec une valeur booléenne la détection de toute modification d'un élément descendant de l'élément modifié.

attributes(Boolean)

La propriété attributes du paramètre modifications définit avec une valeur booléenne la détection de toute modification d'un attribut de l'élément modifié.

attributeOldValue(Boolean)

La propriété attributeOldValue du paramètre modifications définit avec une valeur booléenne si la détection de toute modification d'un attribut de l'élément modifié doit renvoyer la valeur précédente de l'attribut.

characterData(Boolean)

La propriété characterData du paramètre modifications définit avec une valeur booléenne la détection de toute modification du contenu textuel de l'élément modifié.

characterDataOldValue(Boolean)

La propriété characterDataOldValue du paramètre modifications définit avec une valeur booléenne si la détection de toute modification de contenu textuel de l'élément modifié doit renvoyer le contenu précédent de l'élément.

Méthodes de l'instance

detecteur.addListener()

La méthode addListener() de l'interface ElObserve() ajoute un écouteur au détecteur de modifications d'élément HTML.

Syntaxe

detecteur.addListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode addListener() définit un écouteur de modifications d'élément HTML qui sera ajouté au détecteur.
Il s'agit d'une fonction de rappel, dont l'argument renvoie une liste des mutations qu'un élément a subi.

detecteur.removeListener()

La méthode removeListener() de l'interface ElObserve() supprime un écouteur du détecteur de modifications d'élément HTML.

Syntaxe

detecteur.removeListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode removeListener() définit un écouteur de modifications d'élément HTML qui sera supprimé du détecteur.

detecteur.connect()

La méthode connect() de la fonction ElObserve() active le détecteur de modifications d'un élément HTML.

Syntaxe

detecteur.connect();

Paramètre

Aucun.

detecteur.disconnect()

La méthode disconnect() de la fonction ElObserve() désactive le détecteur de modifications d'un élément HTML.
La pile d'écouteurs reste conservée.

Syntaxe

detecteur.disconnect();

Paramètre

Aucun.

var element = document.documentElement;
var modifications = {
  attributes: true
};

var detecteur = new ElObserve(element, modifications);
var ecouteur = function(mutations) {

  console.log(mutations);
  detecteur.disconnect();

};
detecteur.addListener(ecouteur);
detecteur.connect();

element.setAttribute('test', 1);
element.setAttribute('test', 2);

// renvoie : [
//   {
//      addedNodes: NodeList []
//      attributeName: "test"
//      oldValue: null
//      removedNodes: NodeList []
//      target: html
//      type: "attributes"
//   }, {
//     addedNodes: NodeList []
//     attributeName: "test"
//     oldValue: "1"
//     removedNodes: NodeList []
//     target: html
//     type: "attributes"
//   }
// ]
//
// La fonction étant asynchrone, les 2 modifications peuvent être listées dans un même retour.

function ElObserve(e,o){
o=o||{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,
characterData:!0,characterDataOldValue:!0};var t=this,a=[],m=null;
t.connect=function(){if(m===null){m=new MutationObserver(function(x){
for(var i=0,j=a.length;i<j;i++){a[i](x);}});m.observe(e,o);}};
t.disconnect=function(){if(m){m.disconnect();m=null;}};
t.addListener=function(f){a.push(f);};t.removeListener=function(){
var i=a.indexOf(f);if(i>-1){a.slice(i,1);}};}