La méthode la plus efficace de détection / surveillance des changements DOM?

Question

J'ai besoin d'un mécanisme efficace pour détecter des changements dans les DOM. De préférence, cross-browser, mais s'il y a un moyen efficace qui sont pas navigateur croix, je peux les mettre en œuvre une méthode croix navigateur fail-safe.

En particulier, je dois détecter les changements qui affecteraient le texte sur une page, de sorte que toute nouvelle, des éléments éliminés ou modifiés ou des modifications au texte intérieur (innerHTML) serait nécessaire.

Je n'ai pas le contrôle des modifications apportées (ils pourraient être dus à la 3e partie javascript comprend, etc), donc il ne peut pas être abordée sous cet angle - je dois « surveiller » les changements en quelque sorte <. / p>

Actuellement, j'ai mis en place une méthode « quick'n'dirty » qui vérifie body.innerHTML.length à intervalles réguliers. Cela détecte pas bien sûr des changements qui aboutissent à la même longueur retournés, mais dans ce cas est « assez bon » - les chances que cela se produise sont extrêmement minces, et dans ce projet, à défaut de détecter un changement ne se traduira pas perte de données.

Le problème avec body.innerHTML.length est qu'il est cher. Il peut prendre entre 1 et 5 millisecondes sur une rapide navigateur, et cela peut enliser les choses beaucoup - je suis aussi affaire à un grand nombre-ish de iframes et tout cela ajoute. Je suis sûr que le expensiveness de le faire parce que le texte innerHTML ne sont pas stockées par les navigateurs statiquement, et doit être calculé à partir du DOM chaque fois qu'il est lu.

Les types de réponses que je suis à la recherche sont tout des « précis » (par exemple l'événement) à « assez bon » - peut-être quelque chose comme « quick'n'dirty » comme méthode de innerHTML.length, mais qui exécute plus rapide.

EDIT: Je tiens également à souligner que, bien qu'il serait « agréable » pour détecter l'élément précis qui a été modifié, il est une nécessité absolue - juste le fait qu'il ya eu any changement serait assez bon . Espérons que cela élargit les réactions des gens. Je vais enquêter sur les événements de mutation, mais je dois encore une solution de repli pour le soutien IE, de sorte que toute whacky, des idées créatives, hors-de-la-place serait la bienvenue.

Answer 1

http://www.quirksmode.org/js/events/DOMtree.html

jQuery soutient maintenant un moyen d'attacher des événements aux éléments existants et futurs correspondant à un sélecteur: http: //docs.jquery.com/Events/live#typefn

Une autre trouvaille intéressante - http://james.padolsey.com/javascript/monitoring -dom-propriétés /

Answer 2

Pour soulever cette question à ce jour, la norme DOM4 supprime des événements de mutation et les remplace par des observateurs de mutation: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 3

événements Mutation sont la recommandation W3 de ce que vous recherchez ..

Je ne sais pas si elles sont prises en charge tout autour .. (IE sera très probablement pas les soutenir ..)

Answer 4

Vous pouvez essayer d'utiliser les événements DOMNodeInserted et DOMNodeRemoved. Acording à Quirksmode, ils travaillent un peu dans la plupart des navigateurs, à l'exception notable de IE ...

http://www.quirksmode.org/dom/events/index.html

Answer 5

Je l'ai récemment écrit un plug-in qui fait exactement cela - jquery.initialize

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

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

La différence de .each est -. Il faut votre sélecteur, dans ce cas .some-element et attendre de nouveaux éléments avec ce sélecteur à l'avenir, si un tel élément sera ajouté, il sera initialisé trop

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

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

Plugin il instantanément l'init. Aussi plug-in assure un élément est initialisé une seule fois. Donc, si vous ajoutez élément, .deatch() puis du 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 travaillera sur IE9 et 10 avec des dépendances comme indiqué sur la page readme du .

Answer 6

jQuery Muter fait cette aussi, par défaut, il prend en charge comme height, width, scrollHeight etc ... mais il peut aussi être étendue avec un peu de code supplémentaire pour ajouter de nouveaux événements comme si le texte a changé etc ...

http://www.jqui.net/jquery-projects/jquery -mutate officielle /

it helps