personalizado ejemplo attribute javascript dom mutation-events mutation-observers

javascript - ejemplo - ¿El método más eficiente para detectar/monitorear los cambios DOM?



javascript alert confirm (6)

Para actualizar esto, el estándar DOM4 elimina los eventos de mutación y los reemplaza con los observadores de mutaciones: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Necesito un mecanismo eficiente para detectar cambios en el DOM. Preferiblemente, navegador cruzado, pero si hay medios eficientes que no son de navegador cruzado, puedo implementarlos con un método de navegador cruzado a prueba de fallas.

En particular, necesito detectar los cambios que afectarían el texto en una página, por lo que cualquier elemento nuevo, eliminado o modificado, o cambios en el texto interno (innerHTML) serían necesarios.

No tengo control sobre los cambios que se están realizando (pueden deberse a las inclusiones de javascript de terceros, etc.), por lo que no se puede abordar desde este ángulo. De alguna manera, necesito "monitorear" los cambios.

Actualmente he implementado un método "quick''n''dirty" que comprueba body.innerHTML.length a intervalos. Esto, por supuesto, no detectará cambios que den como resultado que se devuelva la misma longitud, pero en este caso es "suficientemente bueno": las posibilidades de que esto ocurra son extremadamente escasas, y en este proyecto, no detectar un cambio no resultará en datos perdidos

El problema con body.innerHTML.length es que es costoso. Puede tomar entre 1 y 5 milisegundos en un navegador rápido , y esto puede atascar mucho las cosas. También estoy lidiando con un gran número de iframes y todo se resume. Estoy bastante seguro de que el costo de hacerlo es porque el texto innerHTML no está almacenado estáticamente por los navegadores, y debe calcularse desde el DOM cada vez que se lee.

Los tipos de respuestas que estoy buscando son cualquier cosa, desde el "preciso" (por ejemplo, el evento) al "suficientemente bueno", tal vez algo tan "rápido" como el método innerHTML.length, pero que se ejecuta más rápido.

EDITAR: También debo señalar que si bien sería "bueno" detectar el elemento preciso que se ha modificado, no es una necesidad absoluta, solo el hecho de que haya habido algún cambio sería suficiente. Con suerte, esto amplía las respuestas de las personas. Voy a investigar los eventos de mutación, pero todavía necesito un respaldo para el soporte de IE, por lo que cualquier idea extravagante, creativa y fuera de la plaza sería muy bienvenida.

Recientemente escribí un complemento que hace exactamente eso: jquery.initialize

Lo usa de la misma manera que .each función

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

La diferencia con .each es que toma su selector, en este caso, .some-element y espera nuevos elementos con este selector en el futuro; si se agrega ese elemento, también se inicializará.

En nuestro caso, la función de inicialización simplemente cambia el color del elemento a azul. Entonces, si agregamos un nuevo elemento (no importa si tiene ajax o incluso un inspector F12 o algo similar) como:

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

El complemento lo iniciará instantáneamente. Además, el complemento se asegura de que un elemento se inicialice solo una vez. Entonces, si agrega un elemento, entonces lo .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

El complemento se basa en MutationObserver : funcionará en IE9 y 10 con dependencias, tal como se detalla en la jquery.initialize .

Los eventos de mutación son la recomendación W3 de lo que estás buscando ...

No estoy seguro de si son compatibles por todos lados. (Es muy probable que IE no los admita ...)