Wie überwache ich das DOM auf Änderungen?

Question

Gibt es eine Möglichkeit - mithilfe von jQuery oder anderweitig - das DOM auf Einfügungen, Löschungen, Aktualisierungen von Stilen usw. zu überwachen?

Answer 1

Siehe "MutationEvent" Elemente hier: https://developer.mozilla.org/en/DOM/DOM_event_reference aber diese sind veraltet.

jQuery bietet nun eine Möglichkeit, Ereignisse zu bestehenden und zukünftigen Elemente zur Befestigung an einen Wähler entsprechen: http://docs.jquery.com/Events/live#typefn

Es kann ein Trick sein, das Sie aus Mangel an richtigen DOM Knoten Änderung Informationen nutzen könnten.

Answer 2

Siehe mutation-summary Bibliothek. Es basiert auf einer neuen Browser-API namens DOM Mutation Observer.

Answer 3

Dies ist nur für Debug-Zwecke:

Firebug ermöglicht derzeit Stützpunkte auf HTML-Knoten setzen.

Sie haben den HTML-Inspektoren zu öffnen, direkt auf einem Knoten klicken und Sie haben folgende Möglichkeiten:

• Interrupt auf Attributänderung
• Interrupt auf Kind add/
• Interrupt entfernen
auf entfernen

Sobald Sie den Haltepunkt erreicht haben, können Sie auch den Call-Stack durchsuchen.

Google Chrome hat eine ähnliche Funktion.

Answer 4

Vor kurzem habe ich ein Plugin geschrieben haben, die genau das tut - jquery.initialize

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

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

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

In unserem Fall Initialisierungsfunktion ändern Sie einfach die Elementfarbe in blau. Also, wenn wir neues Element hinzufügen werden (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 Plugin stellt sicher, dass ein Element nur einmal initialisiert wird. Also, wenn Sie Element, dann .deatch() es von Körper und dann fügen Sie es wieder hinzu, wird es nicht erneut initialisiert werden.

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

Plugin basiert auf MutationObserver - es auf IE9 arbeiten und 10 mit Abhängigkeiten wie auf dem readme page beschrieben.