Effizienteste Verfahren zum Erfassen / Überwachen DOM Änderungen?

Question

Ich brauche einen effizienten Mechanismus für Änderungen an den DOM zu erkennen. Vorzugsweise Cross-Browser, aber wenn es keine effizienten Mittel, die nicht Cross-Browser, ich diese mit einem ausfallsicheren Cross-Browser-Verfahren implementieren kann.

Insbesondere muß ich Änderungen erkennen, die den Text auf einer Seite beeinflussen würden, so dass jeder neue, entfernt oder Elemente geändert oder Änderungen an inneren Text (innerHTML-) erforderlich wäre.

Ich habe keine Kontrolle über die Änderungen vorgenommen werden (sie könnten zu 3rd-Party Javascript fällig enthält, usw.), so dass er nicht aus diesem Blickwinkel angefahren werden kann. - Ich brauche irgendwie für Änderungen auf „Monitor“

Zur Zeit habe ich eine „quick'n'dirty“ Methode implementiert, die Kontrollen in Abständen body.innerHTML.length. Dies wird natürlich nicht erkennen Veränderungen, die in der gleichen Länge führen zurückgegeben werden, aber in diesem Fall ist „gut genug“ - die Chancen dafür sind extrem dünn, und in diesem Projekt eine Änderung zu erkennen, andernfalls werden nicht dazu führen, in verlorenen Daten.

Das Problem mit body.innerHTML.length ist, dass es teuer ist. Es kann dauern zwischen 1 und 5 Millisekunden auf einem schnell Browser, und dies kann die Dinge nach unten viel Moor - ich bin auch mit einer großen Anzahl von ish iframes und das alles summiert sich zu tun. Ich bin ziemlich sicher, dass die Kostspieligkeit, dies zu tun ist, weil der innerHTML- Text nicht statisch von Browsern gespeichert ist, und die Bedürfnisse der DOM wird jedes Mal berechnet werden, um es zu lesen.

Die Arten von Antworten wir suchen sind etwas von dem „präzisen“ (zum Beispiel Ereignis) an den „gut genug“ - vielleicht etwas wie „quick'n'dirty“ als innerHTML.length Methode, aber das ausgeführt werden schneller.

EDIT: Ich mag auch darauf hinweisen, dass, während es „nett“ sein würde, das genaue Element zu erkennen, die modifiziert wurde, ist es nicht eine absolute Notwendigkeit ist - nur die Tatsache, dass es wurde jeder ändern würde gut genug sein, . Hoffentlich erweitert diese Antworten der Menschen. Ich werde Mutationsereignis untersuchen, aber ich brauche noch einen Rückfall für IE-Unterstützung, so dass alle whacky, kreativ, außerhalb-of-the-Platz Ideen sehr willkommen wären.

Answer 1

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

jQuery unterstützt jetzt eine Möglichkeit, Ereignisse heften sich an bestehende und Elemente Zukunft an einen Wähler entsprechen: http: //docs.jquery.com/Events/live#typefn

Eine weitere interessante Entdeckung - http://james.padolsey.com/javascript/monitoring -dom-Eigenschaften /

Answer 2

diese auf den neuesten Stand zu bringen, der DOM4 Standard räumt mit Mutationsereignisse und ersetzt sie durch Mutation Beobachter: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 3

Mutationsereignisse ist die W3 Empfehlung von dem, was Sie für ..

suchen

Nicht sicher, ob sie alle um unterstützt werden .. (IE wird höchstwahrscheinlich unterstützen sie nicht ..)

Answer 4

Sie könnten versuchen, die DOMNodeInserted und DOMNodeRemoved Ereignisse verwenden. Acording zu Quirksmode, sie Art der Arbeit in den meisten Browsern, mit der bemerkenswerten Ausnahme von IE ...

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

Answer 5

Ich habe ein Plugin vor kurzem geschrieben, die genau das tut - jquery.initialize

Sie verwenden sie die gleiche Art und Weise wie .each Funktion

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

Der Unterschied von .each ist -. Es braucht, um Ihre Wähler, in diesem Fall .some-element und warten auf neue Elemente mit diesem Wähler in der Zukunft, wenn ein solches Element hinzugefügt wird, wird es zu initialisiert werden

In unserem Fall Initialisierungsfunktion nur Wechselelement Farbe Blau. Also, wenn wir neues Element hinzufügen (egal ob mit Ajax oder sogar F12 Inspektoren oder etwas) wie:

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

Plugin wird es sofort init. Auch macht Plugin sicher ein Element nur einmal initialisiert wird. Also, wenn Sie Element hinzufügen, dann .deatch() es von Körper und es dann wieder hinzufügen, es wird nicht wieder initialisiert wird.

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

Plugin auf MutationObserver basiert - es wird auf IE9 arbeiten und 10 mit Abhängigkeiten, wie auf der detaillierten readme Seite .

Answer 6

jQuery Mutate tut dies auch standardmäßig unterstützt wie height, width, scrollHeight etc ... aber es kann auch mit einem wenig zusätzlichen Code erweitert werden, um neue Ereignisse wie Siehe unten, wenn der Text geändert hat etc ...

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

Hope es hilft