Il metodo più efficiente per rilevare/monitorare le modifiche del DOM?

Question

Ho bisogno di un meccanismo efficiente per rilevare le modifiche al DOM.Preferibilmente cross-browser, ma se esiste un mezzo efficiente che lo sia non cross browser, posso implementarli con un metodo cross browser sicuro.

In particolare, ho bisogno di rilevare modifiche che influenzerebbero il testo su una pagina, quindi sarebbero necessari eventuali elementi nuovi, rimossi o modificati o modifiche al testo interno (innerHTML).

Non ho il controllo sulle modifiche apportate (potrebbero essere dovute a javascript di terze parti, ecc.), quindi non può essere affrontato da questo punto di vista: devo "monitorare" le modifiche in qualche modo.

Attualmente ho implementato un metodo "quick'n'dirty" che controlla body.innerHTML.length ad intervalli.Questo ovviamente non rileverà le modifiche che comportano la restituzione della stessa lunghezza, ma in questo caso è "abbastanza buono" - le possibilità che ciò accada sono estremamente scarse e in questo progetto non risulterà il mancato rilevamento di una modifica nei dati persi.

Il problema con body.innerHTML.length è che è costoso.Possono essere necessari da 1 a 5 millisecondi su a veloce browser, e questo può impantanare molto le cose: ho anche a che fare con un numero elevato di iframe e tutto si somma.Sono abbastanza sicuro che il costo di farlo sia dovuto al fatto che il testo innerHTML non viene archiviato staticamente dai browser e deve essere calcolato dal DOM ogni volta che viene letto.

I tipi di risposte che cerco vanno da "preciso" (ad esempio evento) a "abbastanza buono" - forse qualcosa di "veloce e sporco" come il metodo innerHTML.length, ma che viene eseguito più velocemente.

MODIFICARE:Vorrei anche sottolineare che, anche se sarebbe "bello" rilevare l'esatto elemento che è stato modificato, non è una necessità assoluta, ma solo il fatto che ci sia stato Qualunque il cambiamento sarebbe abbastanza buono.Speriamo che questo ampli le risposte delle persone.Indagherò sugli eventi di mutazione, ma ho ancora bisogno di un fallback per il supporto di IE, quindi qualsiasi idea stravagante, creativa e fuori dagli schemi sarebbe molto gradita.

Answer 1

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

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

Un altro interessante trovare - http://james.padolsey.com/javascript/monitoring -Dom-properties /

Answer 2

Per portare questo fino ad oggi, lo standard DOM4 elimina mutazione Eventi e li sostituisce con osservatori Mutazione: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 3

eventi di mutazione sono la raccomandazione W3 di ciò che si sta cercando ..

Non so se sono supportati tutti intorno .. (IE, molto probabilmente non sostenerli ..)

Answer 4

Si potrebbe provare a utilizzare gli eventi DOMNodeInserted e DOMNodeRemoved. Tronchi con a Quirksmode, che tipo di lavoro nella maggior parte dei browser, con la notevole eccezione di IE ...

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

Answer 5

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

Si utilizza allo stesso modo come la funzione .each

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

La differenza da .each è -. Ti toglie il selettore, in questo caso .some-element e attendere nuovi elementi con questo selettore in futuro, se sarà aggiunto tale elemento, che verrà inizializzato troppo

Nel nostro funzione di inizializzazione caso basta cambiare il colore elemento di 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. Anche plug-in si assicura un elemento viene inizializzato solo una volta. Quindi, se si aggiunge elemento, quindi .deatch() dal corpo e poi aggiungerlo di nuovo, non verrà inizializzato nuovamente.

$("<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 spiegato a pagina readme .

Answer 6

jQuery Muta fa anche questo, per impostazione predefinita supporta like height, width, scrollHeight eccetera...ma può anche essere esteso con un po' di codice extra per aggiungere nuovi eventi come vedere se il testo è cambiato, ecc...

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

Spero che sia d'aiuto