Détecter les changements dans le DOM

Question

Je veux exécuter une fonction lorsqu'un div ou un input est ajouté au html. Est-ce possible ?

Par exemple, si une entrée de texte est ajoutée, la fonction doit être appelée.

Answer 1

Utilisez le MutationObserver comme indiqué dans l'article de Gabriele Romanato intitulé blog

Chrome 18+, Firefox 14+, IE 11+, Safari 6+.

// The node to be monitored
var target = $( "#content" )[0];

// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added
        var $nodes = $( newNodes ); // jQuery set
        $nodes.each(function() {
            var $node = $( this );
            if( $node.hasClass( "message" ) ) {
                // do something
            }
        });
    }
  });    
});

// Configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);

// Later, you can stop observing
observer.disconnect();

Answer 2

Que diriez-vous d'étendre un jquery pour cela ?

   (function () {
        var ev = new $.Event('remove'),
            orig = $.fn.remove;
        var evap = new $.Event('append'),
           origap = $.fn.append;
        $.fn.remove = function () {
            $(this).trigger(ev);
            return orig.apply(this, arguments);
        }
        $.fn.append = function () {
            $(this).trigger(evap);
            return origap.apply(this, arguments);
        }
    })();
    $(document).on('append', function (e) { /*write your logic here*/ });
    $(document).on('remove', function (e) { /*write your logic here*/ });

Jquery 1.9+ a un support intégré pour cela (j'ai entendu dire que je ne l'ai pas testé).

Answer 3

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

Explications complètes : https://stackoverflow.com/a/11546242/6569224

Answer 4

Je ne savais pas que les types d'événements Mutation étaient dépréciés. Ce n'est pas bon. Ce que nous voyons aujourd'hui, c'est de plus en plus de web applications . En particulier celles où le document n'est chargé qu'UNE SEULE FOIS, et où tous les nouveaux ajouts au DOM proviennent des réponses AJAX. Sans savoir si un nœud a été inséré, certaines choses deviennent difficiles. Prenons l'exemple où je veux définir des attributs spécifiques sur tous les éléments de formulaire. Lorsque le DOM est prêt, je peux facilement parcourir en boucle tous les formulaires et faire ce que je dois faire, sans problème. Cependant, si un nouvel élément de formulaire est inséré via AJAX, je serais obligé d'effectuer manuellement l'opération pour chaque nouveau formulaire chargé, ce qui entraînerait une duplication du code. Cela provoque des maux de tête au niveau de la maintenance et est source d'erreurs. Pour information, la délégation d'événements par bulles de jQuery (comme live() et on()) n'est pas suffisante dans cet exemple, car nous ne répondons pas à un événement, mais modifions les attributs d'un nœud.

En résumé, pour les applications web qui ne se chargent qu'une seule fois, il est judicieux de demander au navigateur d'appeler automatiquement une callback à chaque fois que le DOM est manipulé (par ex : Sur 'DOMNodeInserted', appeler la fonction foo()).

Answer 5

Utilisez TrackChanges pour détecter les modifications html. Lien : https://www.npmjs.com/package/track-changes-js

Exemple

 let button = document.querySelector('.button');

 trackChanges.addObserver('buttonObserver', () => button);

 trackChanges.addHandler('buttonObserver', buttonHandler);

 function buttonHandler(button) {
   console.log(`Button created: ${button}`);
 }