Détecter les changements dans les DOM

2015 mise à jour, de nouvelles MutationObserver est pris en charge par les navigateurs modernes:

Chrome 18+, Firefox 14+, c'est à dire 11+, Safari 6+

Si vous avez besoin d'un soutien plus âgés, vous pouvez essayer de revenir à d'autres approches comme celles mentionnées dans ce 5 (!) ans réponse ci-dessous. Il y a des dragons. Enjoy 🙂

---

Quelqu'un d'autre est en train de changer le document? Parce que si vous avez le plein contrôle sur les modifications que vous avez juste besoin de créer votre propre domChanged API - avec une fonction ou d'événements personnalisés - et détente/appel partout où vous modifier les choses.

La DOM de Niveau 2 a La Mutation des types d'événements, mais les anciennes version d'IE ne le supporte pas. Notez que la mutation événements sont obsolète dans le DOM3 Événements spec et ont un les performances.

Vous pouvez essayer d'imiter la mutation de l'événement avec onpropertychange dans IE (et de revenir à la force brute approche si non est disponible).

Pour un plein domChange un intervalle peut être une sur-tuer. Imaginez que vous avez besoin pour stocker l'état actuel de l'ensemble du document, et d'examiner chaque élément de chaque propriété d'être le même.

Peut-être que si vous êtes seulement intéressés par les éléments et leur ordre (comme vous l'avez mentionné dans votre question), un getElementsByTagName("*") peut travailler. Cela déclenche automatiquement si vous ajoutez un élément, supprimer un élément, remplacer des éléments ou modifier la structure du document.

J'ai écrit une preuve de concept:

(function (window) {
var last = +new Date();
var delay = 100; //default delay
//Manage event queue
var stack = [];
function callback() {
var now = +new Date();
if (now - last > delay) {
for (var i = 0; i < stack.length; i++) {
stack[i]();
}
last = now;
}
}
//Public interface
var onDomChange = function (fn, newdelay) {
if (newdelay) delay = newdelay;
stack.push(fn);
};
//Naive approach for compatibility
function naive() {
var last = document.getElementsByTagName('*');
var lastlen = last.length;
var timer = setTimeout(function check() {
//get current state of the document
var current = document.getElementsByTagName('*');
var len = current.length;
//if the length is different
//it's fairly obvious
if (len != lastlen) {
//just make sure the loop finishes early
last = [];
}
//go check every element in order
for (var i = 0; i < len; i++) {
if (current[i] !== last[i]) {
callback();
last = current;
lastlen = len;
break;
}
}
//over, and over, and over again
setTimeout(check, delay);
}, delay);
}
//
// Check for mutation events support
//
var support = {};
var el = document.documentElement;
var remain = 3;
//callback for the tests
function decide() {
if (support.DOMNodeInserted) {
window.addEventListener("DOMContentLoaded", function () {
if (support.DOMSubtreeModified) { //for FF 3+, Chrome
el.addEventListener('DOMSubtreeModified', callback, false);
} else { //for FF 2, Safari, Opera 9.6+
el.addEventListener('DOMNodeInserted', callback, false);
el.addEventListener('DOMNodeRemoved', callback, false);
}
}, false);
} else if (document.onpropertychange) { //for IE 5.5+
document.onpropertychange = callback;
} else { //fallback
naive();
}
}
//checks a particular event
function test(event) {
el.addEventListener(event, function fn() {
support[event] = true;
el.removeEventListener(event, fn, false);
if (--remain === 0) decide();
}, false);
}
//attach test events
if (window.addEventListener) {
test('DOMSubtreeModified');
test('DOMNodeInserted');
test('DOMNodeRemoved');
} else {
decide();
}
//do the dummy test
var dummy = document.createElement("div");
el.appendChild(dummy);
el.removeChild(dummy);
//expose
window.onDomChange = onDomChange;
})(window);

Utilisation:

onDomChange(function(){ 
alert("The Times They Are a-Changin'");
});

Cela fonctionne sur IE 5.5+, FF 2+, Chrome, Safari 3+ et Opera 9.6+

J'ai récemment écrit un plugin qui fait exactement cela - jquery.initialiser

Vous l'utilisez de la même manière que .each fonction

$(".some-element").initialize( function(){
$(this).css("color", "blue"); 
});

La différence de .each est - il en faut du sélecteur, dans ce cas .some-element et d'attendre de nouveaux éléments avec le sélecteur dans le futur, si un tel élément sera ajouté, il sera initialisé trop.

Dans notre cas, la fonction d'initialisation juste changer l'élément de couleur bleu. Donc, si nous allons ajouter un nouvel élément (peu importe si avec ajax ou même F12 inspecteur ou quoi que ce soit) comme:

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

Plugin init instantanément. Aussi plugin permet de s'assurer qu'un élément est initialisé qu'une seule fois. Donc, si vous ajoutez l'élément, puis .detach() de corps, puis l'ajouter à nouveau, il ne sera pas initialisé à nouveau.

$("<div/>").addClass('some-element').appendTo("body").detach()
.appendTo(".some-container");
//initialized only once

Plugin est basé sur MutationObserver - il fonctionnera sur IE9 et 10 avec dépendances détaillées sur le page readme.

C'est un exemple d'utilisation de MutationObserver de Mozilla adaptée à partir de ce post de blog

Chrome 18+, Firefox 14+, c'est à dire 11+, Safari 6+

//Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');
//Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };
//Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
//Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
//Start observing the target node for configured mutations
observer.observe(targetNode, config);
//Later, you can stop observing
observer.disconnect();

Comment sur l'extension de 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 pas testé).