Déclenchement d'événements lors de modifications d'attributs DOM

De nombreux scénarios nécessitent de détecter des 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 de cette fonctionnalité par le navigateur 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 modifications 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 :

// 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"] });

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 utilisez jQuery, vous pouvez utiliser son plugin d'événements de mutation 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.

$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});

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