¿Cómo controlo el DOM para ver los cambios?

Question

¿Hay alguna manera, usando jQuery o no, de monitorear el DOM para las inserciones, eliminaciones, actualizaciones de estilos, etc.?

Answer 1

Vea los elementos "MutationEvent" aquí: https://developer.mozilla.org/en/DOM/DOM_event_reference pero están en desuso.

jQuery incluye ahora una manera de unir los eventos a los elementos existentes y futuros correspondientes a un selector: http://docs.jquery.com/Events/live#typefn

Puede ser un truco que puede utilizar por falta de información adecuada modificación DOM nodo.

Answer 2

Ver la biblioteca mutation-summary. Está construido sobre una nueva API de navegador llamada DOM Mutation Observers.

Answer 3

Esto es sólo para propósitos de depuración:

Firebug actualmente permite establecer puntos de interrupción en los nodos HTML.

usted tiene que abrir el inspector de HTML, haga clic derecho en un nodo y tiene las siguientes opciones:

• interrupción de cambio de atributo
• interrupción de niño agregar/eliminar
• interrupción de eliminar

Una vez que llegue al punto de interrupción también puede explorar la pila de llamadas.

Google Chrome tiene una función similar también.

Answer 4

Recientemente he escrito un plugin que hace exactamente eso - jquery.initialize

Se usa la misma manera que .each función

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

La diferencia de .each es - que toma el selector, en este caso .some-element y espere nuevos elementos con este selector en el futuro, si dicho elemento se agregará, también se inicializará.

En nuestro caso, la función de inicialización simplemente cambia el color del elemento a azul. Así que si vamos a añadir nuevo elemento (no importa si con el Ajax o incluso inspector de F12 o cualquier cosa) como:

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

Plugin init al instante. Además, el complemento se asegura de que un elemento se inicialice solo una vez. Entonces, si agrega un elemento, entonces .deatch() del cuerpo y luego lo vuelve a agregar, no se inicializará nuevamente.

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

Plugin se basa en MutationObserver - que funcionará en IE9 y 10 con dependencias como se detalla en el readme page.