Come posso monitorare il DOM per le modifiche?

Question

C'è un modo - usando jQuery o altro - per monitorare il DOM per inserimenti, cancellazioni, aggiornamenti di stili, ecc?

Answer 1

Vedere gli elementi "MutationEvent" qui: https://developer.mozilla.org/en/DOM/DOM_event_reference ma quelli sono deprecati.

jQuery ora dispone di un modo per collegare gli eventi agli elementi esistenti e futuri corrispondenti ad un selettore: http://docs.jquery.com/Events/live#typefn

Potrebbe essere un trucco si potrebbe usare per la mancanza di una corretta informazioni modifica DOM Node.

Answer 2

Vedere la libreria mutation-summary. È costruito su una nuova API per browser chiamata DOM Mutation Observers.

Answer 3

Questo è solo a scopo di debug:

Firebug attualmente consente di impostare i punti di interruzione sui nodi html.

è necessario aprire la finestra di ispezione html, fate clic destro su un nodo e si hanno le seguenti opzioni:

• interrupt sul cambiamento attributo
• interrupt sul bambino aggiunge/rimuove
• interrupt su rimuovere

Una volta raggiunto il punto di interruzione, è anche possibile sfogliare lo stack di chiamate.

Google Chrome ha anche una funzione simile.

Answer 4

Recentemente ho scritto un plugin che fa esattamente questo - jquery.initialize

Si utilizza allo stesso modo .each funzione

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

La differenza da .each è - ti toglie il selettore, in questo caso .some-element e attendi i nuovi elementi con questo selettore in futuro, se tale elemento verrà aggiunto, verrà anch'esso inizializzato.

Nel nostro caso, la funzione di inizializzazione cambia semplicemente il colore dell'elemento in blu. Quindi, se aggiungeremo nuovo elemento (non importa se con AJAX o addirittura ispettore F12 o qualcosa), come:

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

Plugin init all'istante. Inoltre il plugin si assicura che un elemento sia inizializzato solo una volta. Quindi se aggiungi un elemento, quindi .deatch() dal corpo e quindi lo aggiungi di nuovo, non verrà nuovamente inizializzato.

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

plugin si basa su MutationObserver - lavorerà su IE9 e 10 con le dipendenze, come indicato alla readme page.