46 votes

La méthode la plus efficace pour détecter / surveiller les modifications du DOM?

J'ai besoin d'un mécanisme efficace pour la détection des changements pour les DOM. De préférence, la croix-navigateur, mais si il y a moyens efficaces qui sont pas de la croix-navigateur, je peux mettre en œuvre ces avec un fail-safe de la croix-navigateur méthode.

En particulier, j'ai besoin de détecter les changements qui pourraient affecter le texte sur une page, de sorte que toute nouvelle, supprimer ou modifier les éléments ou les modifications de texte interne (innerHTML) serait nécessaire.

Je n'ai pas de contrôle sur les modifications apportées (ils ont peut-être dû à la 3e partie javascript comprend, etc), donc il ne peut pas être abordé sous cet angle - j'ai besoin de "surveiller" les changements en quelque sorte.

Actuellement j'ai mis en place un "quick n'dirty" méthode qui vérifie body.innerHTML.length , à des intervalles. Ce ne sera pas bien sûr de détecter les changements qui résultent de la même longueur étant retourné, mais dans ce cas est "assez bon" - les chances que cela arrive sont extrêmement minces, et dans ce projet, à défaut de détecter un changement de ne pas entraîner la perte de données.

Le problème avec body.innerHTML.length , c'est que c'est cher. Il peut prendre entre 1 et 5 millisecondes sur un rapide navigateur, et cela peut la tourbière de choses vers le bas beaucoup de choses, je suis aussi un grand-ish nombre des iframes et il ajoute tout. Je suis sûr que la cherté de la faire, c'est parce que le innerHTML de texte n'est pas stocké de manière statique par les navigateurs, et doit être calculée à partir de la DOM chaque fois qu'il est lu.

Les types de réponses, je suis à la recherche sont pour rien dans le "précis" (par exemple de l'événement) à l' "assez bon" - peut-être quelque chose comme "quick n'dirty" comme le innerHTML.méthode de longueur, mais qui s'exécute plus rapidement.

EDIT: Je tiens également à souligner que, alors que ce serait "sympa" pour détecter la précision de l'élément qui a été modifié, il n'est pas une nécessité absolue - juste le fait qu'il n'y a eu aucun changement serait assez bon. J'espère que cela élargit les réponses. Je vais étudier la Mutation des Événements, mais j'ai encore besoin d'un secours pour IE soutien, de sorte que tout dément, créatif, à l'extérieur-de-la-place les idées seront les bienvenues.

34voto

zeveck Points 61

Pour mettre cela à jour, le standard DOM4 supprime les événements de mutation et les remplace par des observateurs de mutation: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

10voto

JAGAMOT Points 1124

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

jQuery prend désormais en charge d'un moyen d'attacher les événements actuels et futurs des éléments correspondant à un sélecteur: http://docs.jquery.com/Events/live#typefn

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

8voto

Gaby aka G. Petrioli Points 85891

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

Je ne sais pas s'ils sont supportés partout .. (IE ne les supportera probablement pas ..)

1voto

Chibu Points 1219

Vous pouvez essayer d'utiliser les événements DOMNodeInserted et DOMNodeRemoved. Selon Quirksmode, ils fonctionnent plus ou moins dans la plupart des navigateurs, à l'exception notable d'IE ...

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

0voto

Val Points 7050

jQuery Mutate fait cela aussi, par défaut, il supporte comme height, width, scrollHeight etc ... mais il peut aussi être étendu avec un peu de code supplémentaire pour ajouter de nouveaux événements comme voir si le texte a changé, etc ...

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

J'espère que ça aide

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X