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

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>

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>

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!