¿Cómo puedo realizar un seguimiento de los cambios en el contenido de una página HTML después de que la página se haya cargado?

Estoy destrozando mi cerebro en este caso.

Después de cargar un documento HTML en un navegador, quiero poder supervisar la página en caso de que el contenido que contiene cambie por algún motivo.

¿Existe una función de Javascript con la que pueda realizar un seguimiento de “qué ha cambiado” en la página web? Esto debería ser independientemente del tipo de contenido en la página HTML.

Tengo dos ejemplos para que reflexione:

Ex1:

Digamos en un documento HTML que hay dos cuadros de selección s1 y s2. La lista de elementos en s2 depende de las selecciones en s1 (la página no se actualiza, es decir, s2 se carga a través de Ajax o algo así). Entonces, después de cargar la página HTML, necesito recibir una notificación cada vez que se rellena s2 …

Ex2:

Digamos, en una página HTML, hay un enlace, Onclicking que crea un div emergente ligero con algo de texto. ¿Cómo puedo capturar el contenido de esta ventana emergente dinámica?

En toda esta discusión, no estoy teniendo en cuenta ningún formato particular de HTML … el contenido HTML puede ser cualquier cosa … Solo necesito seguir el seguimiento si algún contenido cambia después de que la página se carga …

Idealmente, necesito lograr esto usando JavaScript (scripting del lado del cliente). ¿Cómo puedo conseguir esto?

Puede realizar un seguimiento de los cambios en un cuadro de texto usando onkeyup. Esto te dirá cada vez que alguien haga un cambio en un cuadro de texto dado.

Esto podría potencialmente despedir muchos eventos. Sin embargo, usar onblur no necesariamente le informará sobre los cambios en el cuadro de texto y en la cobertura del navegador de onchange es irregular en el mejor de los casos.

Si está utilizando AJAX, puede configurar la función de respuesta para manejar un sistema de “escucha de eventos” de producción casera. Por lo tanto, después de que la respuesta haga lo que debe hacer, podría llamar a cualquier método que esté registrado con ella, y pasar el texto de respuesta cuando sea necesario.

Entonces, a partir de los ejemplos anteriores, en Ex1, cuando AJAX regrese de S1, cargará S2 y luego llamará a un método que dice que S2 ha cambiado. En Ex2, cuando el nuevo AJAX devuelve los contenidos del DIV, después de cargarlo en el DIV, llama a un método diferente (o posiblemente el mismo dependiendo de lo que intente hacer) y lo alerta de que el DIV tiene nuevos contenidos.

Puede configurar su secuencia de comandos “observador” como un temporizador, ejecutando una función diff en el documento actual.body.innerHTML y una versión almacenada capturada en la carga. Dependiendo de cuán rápido se ejecutará el diff, tendrá una idea de qué intervalo de temporizador usar.

Es posible que esto no capture los cambios en los elementos del formulario, pero para ellos es más fácil recorrer todos los elementos del formulario en todas las formas de la página.

Esta es la función de diferencia de alguien que encontré en Google: http://snowtide.com/jsdifflib