Connaître l'API MutationObserver

 19659006] Un  MutationObserver  peut être utilisé de différentes manières, que je traiterai en détail dans la suite de cet article, mais la syntaxe de base pour un  MutationObserver  ressemble à ceci : 
 let observ = nouveau MutationObserver (rappel);
    
fonction callback (mutations) {
  // fais quelque chose ici
}

observer.observer (targetNode, observerOptions);
 La première ligne crée un nouveau  MutationObserver  à l'aide du constructeur  MutationObserver () . L'argument transmis au constructeur est une fonction de rappel qui sera appelée à chaque modification DOM qualifiée.
 La manière de déterminer ce qui est qualifié pour un observateur particulier consiste à utiliser la dernière ligne du code ci-dessus. Sur cette ligne, j’utilise la méthode  observe ()  de la  MutationObserver  pour commencer à observer. Vous pouvez comparer cela à quelque chose comme  addEventListener () . Dès que vous attachez un écouteur, la page "écoute" l’événement spécifié. De même, lorsque vous commencez à observer, la page commence à «observer» pour la  MutationObserver  spécifiée.
 La méthode  observe ()  prend deux arguments: La cible   ]qui devrait être le nœud ou l’arborescence de nœuds sur lequel observer les modifications; et un objet  options qui est un objet  MutationObserverInit  qui vous permet de définir la configuration pour l'observateur.
 La dernière fonctionnalité de base essentielle d'un  MutationObserver . est la méthode  disconnect () . Cela vous permet d’arrêter d’observer les modifications spécifiées et vous donne l’image suivante:
 observer.disconnect ();
 Options pour configurer un MutationObserver
 Comme indiqué, la méthode  observe ()  d'un  MutationObserver  requiert un deuxième argument spécifiant les options permettant de décrire le  MutationObserver . . Voici à quoi ressemblerait l’objet options avec toutes les paires propriété / valeur possibles incluses:
 let options = {
  childList: true,
  attributs: vrai,
  characterData: false,
  sous-arbre: faux,
  attributFilter: ['one', 'two'],
  attributOldValue: false,
  characterDataOldValue: false
};
 Lors de la configuration des options  MutationObserver il n’est pas nécessaire d’inclure toutes ces lignes. Je les inclut simplement à des fins de référence afin que vous puissiez voir quelles options sont disponibles et quels types de valeurs elles peuvent prendre. Comme vous pouvez le constater, tous sauf un sont booléens.
 Pour qu'un  MutationObserver  fonctionne, au moins un des  childList  attributs ou  characterData  doit être défini sur  true sinon une erreur sera générée. Les quatre autres propriétés fonctionnent conjointement avec l’une de ces trois propriétés (voir plus loin).
 Jusqu’à présent, j’ai simplement passé en revue la syntaxe pour vous donner un aperçu. Le meilleur moyen d’examiner le fonctionnement de chacune de ces fonctionnalités consiste à fournir des exemples de code et des démonstrations en direct intégrant les différentes options. C’est ce que je ferai pour le reste de cet article.
 Observer les modifications apportées aux éléments enfants à l’aide de childList
 La première et la plus simple  MutationObserver  que vous pouvez initier est celle qui recherche les nœuds enfants d’un noeud spécifié (généralement un élément) à ajouter ou à supprimer. Pour mon exemple, je vais créer une liste non ordonnée dans mon code HTML et je veux savoir à chaque fois qu'un nœud enfant est ajouté ou supprimé de cet élément de la liste.
 Le code HTML de la liste ressemble à ceci:

  
 Pommes 
  
 Oranges 
  
 Bananes 
  
 Pêches 

 Le code JavaScript de mon  MutationObserver  comprend les éléments suivants:
 let mList = document.getElementById ('myList'),
options = {
  childList: true
},
observateur = new MutationObserver (mCallback);

fonction mCallback (mutations) {
  pour (laisser mutation de mutations) {
    if (mutation.type === 'childList') {
      console.log ('Mutation détectée: un noeud enfant a été ajouté ou supprimé.');
    }
  }
}

observateur.observer (liste, options);
 Ceci n'est qu'une partie du code. Par souci de brièveté, je montre les sections les plus importantes qui traitent de l’API  MutationObserver  elle-même.
 Remarquez comment je passe en revue l’argument des mutations  qui est un . ] MutationRecord  objet qui possède plusieurs propriétés différentes. Dans ce cas, je lis la propriété  de type  et enregistre un message indiquant que le navigateur a détecté une mutation qualifiée. Vous remarquerez également que je passe l'élément  mList  (une référence à ma liste HTML) en tant qu'élément ciblé (c'est-à-dire l'élément sur lequel je souhaite observer des modifications).
 Utilisez les boutons pour démarrez et arrêtez le  MutationObserver . Les messages du journal aident à clarifier ce qui se passe. Les commentaires dans le code fournissent également des explications.
 Notez quelques points importants ici:
 La fonction de rappel (que j'ai nommée  mCallback pour illustrer le fait que vous pouvez l'appeler comme vous voulez). se déclenche à chaque fois qu'une mutation réussie est détectée et après l'exécution de la méthode  observe () 
 Dans mon exemple, le seul "type" de mutation qui se qualifie est  childList . il est donc logique de chercher celui-ci lorsque vous parcourez MutationRecord. La recherche de tout autre type dans cet exemple ne ferait rien (les autres types seront utilisés dans les démos suivants).
 À l'aide de  childList je peux ajouter ou supprimer un nœud de texte de l'élément ciblé, et cela également. serait admissible. Il n’est donc pas nécessaire que ce soit un élément ajouté ou supprimé.
 Dans cet exemple, seuls les noeuds enfant immédiats seront qualifiés. Nous verrons plus loin dans cet article comment cela peut s'appliquer à tous les nœuds enfants, petits-enfants, etc.
 Observer les modifications apportées aux attributs d'un élément
 Un autre type de mutation commun que vous pouvez suivre est le suivant: lorsqu'un attribut d'un élément spécifié change. Dans la prochaine démonstration interactive, je vais observer les modifications apportées aux attributs d’un élément de paragraphe.
 laissez mPar = document.getElementById ('myParagraph'),
  options = {
    attributs: vrai
  },
  observateur = new MutationObserver (mCallback);

fonction mCallback (mutations) {
  pour (laisser mutation de mutations) {
    if (mutation.type === 'attributs') {
      // Faites quelque chose ici ...
    }
  }
}

observateur.observer (mPar, options);
 Encore une fois, j'ai abrégé le code pour plus de clarté, mais les parties importantes sont les suivantes:
 L'objet  options  utilise la propriété  d'attributs définie sur .  pour indiquer à  MutationObserver  que je souhaite rechercher des modifications dans les attributs de l'élément ciblé.
 Le type de mutation que je teste dans ma boucle est  attributs le
 J'utilise également la propriété  attributeName  de l'objet  mutation ce qui me permet de déterminer quel attribut a été modifié.
 Lorsque je déclenche l'observateur, je passe l'élément de paragraphe par référence, ainsi que les options.
 Dans cet exemple, un bouton permet de basculer le nom d'une classe sur l'élément HTML ciblé. La fonction de rappel dans l'observateur de mutation est déclenchée chaque fois que la classe est ajoutée ou supprimée.
 Observer les modifications apportées aux données de personnage
 Vous pouvez également rechercher d'autres modifications dans votre application, à savoir les mutations des données de personnage; c'est-à-dire les modifications apportées à un nœud de texte spécifique. Pour ce faire, définissez la propriété  characterData  sur  true  dans l'objet  options . Voici le code:
 let options = {
    characterData: true
  },
  observateur = new MutationObserver (mCallback);
  
fonction mCallback (mutations) {
  pour (laisser mutation de mutations) {
    if (mutation.type === 'characterData') {
      // Faites quelque chose ici ...
    }
  }
}
 Remarquez à nouveau que le type   recherché dans la fonction de rappel est  characterData .
 Dans cet exemple, je cherche à modifier un nœud de texte spécifique, que je target via  element.childNodes [0]. C'est un peu hacky mais cela conviendra pour cet exemple. Le texte peut être modifié par l'utilisateur via l'attribut  contenteditable  d'un élément de paragraphe.
 Défis lors de l'observation des modifications de données de caractères
 Si vous avez manipulé  de manière à ce qu'il soit modifiable alors vous savez peut-être qu'il existe des raccourcis clavier permettant l'édition de texte enrichi. Par exemple, CTRL-B met le texte en gras, CTRL-I rend le texte en italique, etc. Cela divisera le nœud de texte en plusieurs nœuds de texte, vous remarquerez donc que le  MutationObserver  cessera de répondre à moins que vous ne modifiiez le texte qui est toujours considéré comme faisant partie du nœud d'origine.
 Je devrais également signaler. que si vous supprimez tout le texte, le  MutationObserver  ne déclenchera plus le rappel. Je suppose que cela se produit car une fois que le nœud de texte a disparu, l’élément cible n’existe plus. Pour lutter contre cela, ma démo cesse d’observer lorsque le texte est supprimé, même si les raccourcis en texte enrichi deviennent un peu collants.
 Mais ne vous inquiétez pas, dans la suite de cet article, je discuterai d’un meilleur moyen de utilisez l'option  characterData  sans avoir à gérer autant de problèmes de ce genre.
 Observer les modifications apportées aux attributs spécifiés
 Je vous ai déjà montré comment observer les modifications apportées aux attributs d'un élément spécifié. Dans ce cas, bien que la démonstration déclenche un changement de nom de classe, j'aurais pu changer n'importe quel attribut de l'élément spécifié. Mais que faire si je veux observer des modifications dans un ou plusieurs attributs spécifiques tout en ignorant les autres?
 Je peux le faire en utilisant la propriété facultative  attributeFilter  dans l'objet  option . Voici un exemple:
 let options = {
      attributs: vrai,
      attributFilter: ['hidden', 'contenteditable', 'data-par']
    },
    observateur = new MutationObserver (mCallback);

fonction mCallback (mutations) {
  pour (laisser mutation de mutations) {
    if (mutation.type === 'attributs') {
      // Faites quelque chose ici ...
    }
  }
}
 Comme indiqué ci-dessus, la propriété  attributeFilter  accepte un tableau d'attributs spécifiques que je souhaite surveiller. Dans cet exemple, le  MutationObserver  déclenchera le rappel à chaque fois qu'un ou plusieurs des attributs  cachés  contenteditable  ou  data-par  est modifié.
   
 Encore une fois, je vise un élément de paragraphe spécifique. Notez le menu déroulant de sélection qui choisit l’attribut à modifier. L'attribut  draggable  est le seul qui ne soit pas admissible, car je ne l'avais pas spécifié dans mes options.
 Remarquez dans le code que j'utilise à nouveau le  nom d'attribut  propriété de l'objet  MutationRecord  pour consigner l'attribut modifié. Et bien sûr, comme avec les autres démos, le  MutationObserver  ne commencera pas à surveiller les modifications tant que le bouton "Démarrer" n'aura pas été cliqué.
 Une autre chose que je devrais souligner ici est que je ne le fais pas. t pas besoin de définir les attributs   sur  true  dans ce cas; il est implicite en raison de la définition de  d'attributsFilter . C’est pourquoi mon objet options pourrait se présenter comme suit et fonctionnerait de la même manière:
 let options = {
  attributFilter: ['hidden', 'contenteditable', 'data-par']
}
 D'autre part, si j'assigne explicitement les attributs   à  false  avec un tableau  attributeFilter cela ne fonctionnera pas, car le  false La valeur  aurait priorité et l'option du filtre serait ignorée.
 Observer les modifications apportées aux nœuds et à leur sous-arbre
 Jusqu'à présent, lors de la configuration de chaque  MutationObserver traitant de l'élément ciblé lui-même et, dans le cas de  childList des enfants immédiats de l'élément. Mais il se peut que je veuille observer des modifications dans l’un des éléments suivants:
 Un élément et tous ses éléments enfants;
 Un ou plusieurs attributs d’un élément et de ses éléments enfants; [19659033] Tous les nœuds de texte à l'intérieur d'un élément.
 Tout ce qui précède peut être réalisé à l'aide de la propriété  subtree  de l'objet options.
 childList With subtree
 Commençons par rechercher les modifications apportées à un objet les nœuds enfants de l'élément, même s'ils ne sont pas des enfants immédiats. Je peux modifier mon objet options pour qu'il ressemble à ceci:
 options = {
  childList: true,
  sous-arbre: true
}
 Tout le reste du code est plus ou moins identique à l'exemple précédent  childList avec quelques balises et boutons supplémentaires.
 Il existe deux listes, l'une imbriquée dans l'autre. Lorsque le  MutationObserver  est démarré, le rappel déclenchera les modifications apportées à l'une ou l'autre liste. Mais si je devais redéfinir la propriété  du sous-arbre  en  false  (valeur par défaut lorsqu'elle n'est pas présente), le rappel ne s'exécuterait pas lorsque la liste imbriquée serait modifiée.
 subtree
 Voici un autre exemple, utilisant cette fois-ci  sous-arbre  avec  attributs  et  attributFilter . Cela me permet d’observer les modifications apportées aux attributs non seulement sur l’élément cible, mais également sur les attributs de tous les éléments enfants de l’élément cible:
 options = {
  attributs: vrai,
  attributFilter: ['hidden', 'contenteditable', 'data-par'],
  sous-arbre: true
}
 Ceci est similaire à la démonstration d’attributs précédente, mais cette fois j’ai configuré deux éléments de sélection différents. La première modifie les attributs sur l'élément de paragraphe ciblé, tandis que l'autre modifie les attributs sur un élément enfant dans le paragraphe.
 Encore une fois, si vous redéfinissiez l'option  subtree  sur  false  (ou le supprimer), le deuxième bouton bascule ne déclencherait pas le rappel  de MutationObserver . Et, bien sûr, je pourrais omettre complètement  attributeFilter et le  MutationObserver  chercherait à modifier  tous les attributs  du sous-arbre plutôt que ceux spécifiés. ] characterData avec subtree