Comment détecter l'ajout d'éléments dans le DOM : dépréciation et alternatives ?

Observation de l'ajout d'éléments dans le DOM

Pour recevoir une notification lorsqu'un élément est ajouté à une page Web, quelques approches sont disponibles :

Événements de mutation obsolètes :

Auparavant, les événements de mutation (par exemple, DOMNodeInserted) pouvaient être utilisés pour surveiller les modifications du DOM. Cependant, ces événements sont désormais obsolètes.

Interrogation continue :

Une approche obsolète consiste à utiliser setInterval() pour vérifier régulièrement la présence de l'élément souhaité :

<code class="js">function checkDOMChange() {
  // Check for element presence...

  // Continue polling after 100 milliseconds
  setTimeout(checkDOMChange, 100);
}</code>

Il s'agit d'une solution inefficace qui consomme des ressources CPU importantes.

Recommandé : MutationObserver

Les navigateurs modernes prennent en charge MutationObserver, qui offre une alternative à la mutation événements. Il vous permet d'observer les modifications du DOM et d'exécuter une fonction de rappel lorsqu'un élément est ajouté :

<code class="js">const observer = new MutationObserver(mutations => {
  // Process DOM changes...
});

observer.observe(document.documentElement, { childList: true });</code>

En implémentant MutationObserver, vous pouvez surveiller efficacement les ajouts du DOM sans les limitations des événements de mutation obsolètes ou l'inefficacité de l'interrogation continue. .

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!