Comment puis-je détecter et répondre efficacement aux modifications du DOM en JavaScript ?

Détecter les modifications dans le DOM

La détection des modifications dans le DOM est cruciale pour créer des applications Web dynamiques qui répondent aux événements en temps réel. Un scénario courant consiste à exécuter une fonction lorsque des éléments tels que des DIV ou des entrées sont ajoutés au document.

Solution utilisant MutationObserver

L'approche préférée pour observer les modifications du DOM consiste à utiliser Interface MutationObserver. Il fournit un moyen fiable et efficace de surveiller les modifications apportées à des nœuds spécifiques dans le DOM.

var observeDOM = (function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function(obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    } else if (window.addEventListener) { // browser support fallback
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

// Example usage to observe a list element:
observeDOM(listEl, function(m) {
   var addedNodes = [], removedNodes = [];

   m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes));

   m.forEach(record => record.removedNodes.length & removedNodes.push(...record.removedNodes));

   console.log('Added:', addedNodes, 'Removed:', removedNodes);
});

Dans cet exemple, la fonction observeDOM prend un nœud (dans ce cas, un élément de liste) et une fonction de rappel. Il utilise l'interface MutationObserver pour observer les modifications dans les nœuds enfants de l'élément de liste. Lorsqu'un changement se produit, la fonction de rappel est exécutée avec des informations sur les nœuds ajoutés et supprimés.

Approches alternatives

Si MutationObserver n'est pas pris en charge dans le navigateur cible, solution de secours les options incluent :

• DOMNodeInserted et DOMNodeRemoved événements, qui peuvent être attachés directement à l'élément observé.
• setInterval fonction pour vérifier périodiquement les changements, bien que cela soit moins efficace.

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!