Comment puis-je détecter les changements d’attributs dans le DOM ?

Détection des changements d'attributs dans le DOM

Question :

Est-il possible de lancer une événement, tel qu'un événement personnalisé, lorsqu'un attribut d'un élément HTML change ? Plus précisément, lorsque l'attribut src d'un élément image () ou l'attribut innerHTML d'un élément division (

) est modifié ?

Réponse :

Événements de mutation (obsolètes)

Historiquement, les événements de mutation DOM étaient utilisés pour surveiller les changements d'attributs. Cependant, ils sont obsolètes depuis 2012. Leur remplacement, MutationObserver, est recommandé.

MutationObserver

MutationObserver est une API avancée qui vous permet d'observer les modifications apportées au DOM. . Il offre un contrôle plus fin que les événements de mutation et vous permet de suivre des éléments, des mutations et des structures arborescentes spécifiques.

Exemple avecMutationObserver :

<code class="javascript">// Create a new MutationObserver instance
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // Check if the mutation is an attribute change
    if (mutation.type === "attributes") {
      console.log(`Attribute changed on ${mutation.target.nodeName}`);
    }
  }
});

// Start observing the document body for attribute changes
observer.observe(document.body, { attributes: true });</code>

Plugin d'événements jQuery

Le plugin Mutation Events pour jQuery peut également être utilisé pour détecter les changements d'attributs. Il fournit une API plus facile à utiliser pour les cas d'utilisation de base.

Exemple avec le plug-in jQuery Mutation Events :

<code class="javascript">$("img").on("attrchange", (e) => {
  console.log(`Image src changed to ${e.target.src}`);
});</code>

Remarque :

La prise en charge par les navigateurs des événements de mutation DOM varie. Il est toujours recommandé de vérifier la compatibilité avant de s'appuyer sur cette fonctionnalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery html for Attribute Event dom this innerHTML

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn