Maison > interface Web > js tutoriel > le corps du texte

Comment détecter et répondre aux modifications des attributs DOM : MutationObserver vs méthodes héritées ?

Patricia Arquette
Libérer: 2024-10-27 00:22:02
original
1055 Les gens l'ont consulté

How to Detect and Respond to DOM Attribute Changes: MutationObserver vs. Legacy Methods?

Déclenchement d'événements sur les modifications des attributs DOM

De nombreux scénarios nécessitent la détection de modifications dans les attributs DOM, par exemple lorsque la source d'une image change ou le HTML d'un div mises à jour du contenu. La prise en charge par le navigateur de cette fonctionnalité a évolué au fil du temps.

Événements de mutation DOM (héritage)

Dans le passé, les événements de mutation DOM fournissaient un moyen d'écouter les changements d'attributs. Ces événements comprenaient :

  • DOMAttrModified
  • DOMNodeInserted
  • DOMNodeRemoved

Cependant, la prise en charge par le navigateur des événements de mutation DOM était incohérente, ce qui conduisait à leur dépréciation en 2012.

API MutationObserver

En remplacement des événements de mutation DOM, l'API MutationObserver a été introduite. MutationObserver offre une méthode plus robuste et largement prise en charge pour détecter les modifications dans les attributs du DOM et d'autres aspects du DOM.

À l'aide de MutationObserver, vous pouvez créer une instance d'observateur et spécifier les types de modifications que vous souhaitez surveiller. L'observateur vous avertira lorsque des modifications correspondantes se produiront dans le DOM.

Voici un exemple de la façon dont vous pouvez utiliser MutationObserver pour détecter les modifications apportées à l'attribut source d'une image :

<code class="javascript">// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });</code>
Copier après la connexion

Dans cet exemple , l'observateur est configuré pour surveiller l'attribut src du nœud d'image et invoquera le rappel spécifié chaque fois que cet attribut change.

Plugin d'événements de mutation jQuery

Si vous Si vous utilisez jQuery, vous pouvez utiliser son plugin Mutation Events comme alternative à MutationObserver. Ce plugin fournit une interface simplifiée pour gérer les modifications d'attributs DOM et peut être utile si vous n'êtes intéressé que par des modifications d'attributs spécifiques.

<code class="javascript">$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});</code>
Copier après la connexion

En utilisant MutationObserver ou le plugin jQuery Mutation Events, vous pouvez détecter efficacement les changements. dans les attributs DOM et exécutez des actions personnalisées en réponse à ces modifications.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal