Comment puis-je détecter et répondre aux éléments ajoutés dans le DOM ?

Détection des modifications du DOM pour les éléments ajoutés

Introduction

Pour répondre aux modifications du modèle objet de document (DOM), les développeurs doivent souvent exécuter des fonctions lorsque des éléments sont ajoutés au HTML. Cet article propose une solution utilisant MutationObserver, offrant à la fois une approche avancée qui fonctionne sur les navigateurs modernes et une méthode de secours pour les navigateurs existants.

L'approche avancée : MutationObserver

MutationObserver est une API qui vous permet pour observer et répondre à des changements spécifiques dans le DOM. Pour détecter les éléments ajoutés, observeDOM(obj, callback) est utilisé, où obj est l'élément cible et callback est la fonction à exécuter en cas de modification. Voici un extrait de code :

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

  return function(obj, callback) {
    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    }
    // Fallback for legacy browsers
    else if (window.addEventListener) {
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

Pour utiliser observeDOM, fournissez l'élément DOM à observer et un rappel qui reçoit un tableau d'objets MutationRecord. Chaque MutationRecord représente un changement dans le DOM, et vous pouvez en extraire les nœuds ajoutés et supprimés.

Exemple et démo

Voici un exemple simplifié où un rappel est déclenché lorsqu'un élément est ajouté ou supprimé d'un élément de liste :

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

Cet article est accompagné d'une démo en direct qui affiche les journaux de la console au fur et à mesure que des éléments DOM sont ajoutés ou supprimé, présentant la fonctionnalité d'observation des modifications du DOM.

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!