Comment détecter les ajouts d'éléments DOM à l'aide de MutationObserver ?

Observation des ajouts d'éléments dans le DOM

Vous recherchez un mécanisme pour déclencher une fonction chaque fois qu'un élément DOM est ajouté à une page Web. Étant donné que vous développez une extension de navigateur et que vous n'avez pas accès au code source de la page Web, vous vous interrogez sur les approches potentielles pour y parvenir.

Bien que vous envisagez d'interroger le DOM à l'aide de setInterval(), cette approche est sous-optimale et informatique. inefficace. Heureusement, il existe de meilleures alternatives disponibles.

Dans les versions antérieures des navigateurs, des événements de mutation pouvaient être utilisés pour détecter les modifications du DOM. Cependant, ces événements sont depuis obsolètes. Par conséquent, la solution recommandée consiste désormais à exploiter MutationObserver.

MutationObserver fournit un moyen efficace et efficient d'observer les changements au sein du DOM. Il propose une API simple mais puissante pour surveiller des mutations spécifiques, y compris l'ajout ou la suppression d'éléments. Contrairement à l'interrogation, MutationObserver ne nécessite pas d'analyse continue du DOM, ce qui réduit la surcharge de calcul.

Pour utiliser MutationObserver, vous pouvez implémenter une fonction analogue à la suivante :

<code class="javascript">function checkDOMChange() {
  // Define the type of mutation you're interested in (e.g., element addition)
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      // Handle element addition here
    });
  });

  // Select the target element you wish to monitor
  var target = document.querySelector('body');

  // Start observing the target element for specific mutations
  observer.observe(target, { childList: true });

  // Optionally, you can terminate the observer when no longer needed
  // observer.disconnect();
}</code>

En implémentant MutationObserver, vous pouvez surveillez efficacement les ajouts d’éléments et déclenchez la fonction souhaitée en conséquence. Cette approche élimine le besoin d'interrogations DOM constantes, améliorant ainsi les performances et l'expérience utilisateur.

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!