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 implémenter cela, vous pouvez utiliser 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 :

  
list item (click to delete)

Cet exemple illustre 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.