Comment puis-je détecter les changements d'attributs dans le DOM ?-js tutoriel-php.cn

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

Patricia Arquette

Libérer： 2024-10-26 16:59:03

original

554 Les gens l'ont consulté

How can I detect Attribute Changes in the 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>

Copier après la connexion

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>

Copier après la connexion

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!