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

Détecter efficacement les modifications du DOM

L'observation des modifications dans le DOM est cruciale pour créer des applications Web dynamiques qui répondent aux interactions des utilisateurs. Une approche largement utilisée consiste à exploiter MutationObserver, une API moderne qui vous permet de surveiller les modifications du DOM. Cette approche est prise en charge par la plupart des navigateurs modernes, notamment IE11 , Firefox et WebKit.

Pour l'implémenter, vous pouvez suivre les étapes suivantes :

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);
    }
  }
})();

Cette fonction prend un élément (obj ) et une fonction de rappel (callback) comme arguments. Le rappel sera exécuté chaque fois qu'une modification est apportée à l'élément ou à ses enfants.

Pour démontrer l'utilisation, considérons cet exemple :

<ol>
  <li><button>list item (click to delete)</button></li>
</ol>

<script>
  // add item
  var itemHTML = '<li><button>list item (click to delete)</button></li>';
  var listEl = document.querySelector('ol');

  // delete item
  listEl.onclick = function(e) {
    if (e.target.nodeName == 'BUTTON') {
      e.target.parentNode.parentNode.removeChild(e.target.parentNode);
    }
  };

  // Observe a specific DOM 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.clear();
    console.log('Added:', addedNodes, 'Removed:', removedNodes);
  });
</script>

Cet exemple démontre ce qui suit :

• Ajout d'un élément à la liste
• Suppression d'un élément de la liste
• Utilisation MutationObserver pour détecter les changements dans la liste. Cela peut être utilisé pour effectuer diverses actions, telles que la modification de l'interface utilisateur ou la mise à jour des données backend.

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!