MutationObserver.observe()

El método MutationObserver observe() configura la funcion MutationObserver para que inicie la recepción de cambios en el DOM que coincidan con las opciones dadas.

Según la configuración, el observador verá un solo Node del árbol del DOM, o ese nodo y alguno o todos los nodos descendientes.

Para detener al MutationObserver (de modo que la funcion no sea llamada), llame al método MutationObserver.disconnect().

Sintaxis

mutationObserver.observe(target[, options])

Parámetros

target
 Un Node del DOM (que puede ser un Element) perteneciente al  árbol DOM, o la raiz de un subárbol de nodos, donde observar cambios.
options Optional
Un objeto MutationObserverInit opcional, que decribe qué cambios en el DOM deben ser enviados a la función callback del observador.

Valor devuelto

undefined.

Excepciones

TypeError
llamado en cualquiera de las siguientes circunstancias

Notas de uso

Reutilizar MutationObservers

Puede llamar varias veces al método observe() del mismo objeto MutationObserver  para ver los cambios en diferentes partes del árbol del DOM y/o diferentes tipos de cambios. Sin embargo ha de tener en cuenta:

  • Si llama a observe() en un nodo que ya estaba siendo observado por el mísmo MutationObserver, todos los observadores serán automáticamente eliminados de todos los elementos observados antes de que el nuevo observador sea activado.
  • Si el mismo MutationObserver no estaba siendo usado sobre ese nodo, entonces los observadores existentes se quedarán solos y se agregará el nuevo.

La observación sigue a los nodos cuando se desconecta

Los observadores de cambios tienen como objetivo permitirle ver un conjunto de nodos a lo largo del tiempo, incluso si la conexion entre estos nodos desaparece. Si esta observando un subárbol de nodos, y una parte del subárbol es desconectado y llevado a otra parte del DOM, continuará viendo ese mismo segmento de nodos, recibiendo las mismas llamadas a la función que antes de ser desconectado.

En otras palabras, hasta que se le haya notificado que los nodos se están separando de su subárbol monitoreado, recibirá notificaciones de los cambios en ese subárbol y sus nodos. Esto evita que pierda los cambios producidos despues de que la conexion se corte y antes de que tenga la oportunidad de especificar un nuevo monitoreo sobre los cambios en el nodo o subárbol movido.

De manera que en teoria si mantiene la pista de los objetos MutationRecord que describen los cambios, podrá "deshacer" los mismos, devolviendo el DOM a su estado inicial.

Ejemplo

 

Especificaciones

Specification Status Comment
DOM
La definición de 'MutationObserver.observe()' en esta especificación.
Living Standard  

Compatibilidad

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
observeChrome Soporte completo 18Edge Soporte completo 12Firefox Soporte completo 14IE Soporte completo 11Opera Soporte completo 15Safari Soporte completo 6WebView Android Soporte completo SiChrome Android Soporte completo 18Firefox Android Soporte completo 14Opera Android Soporte completo 14Safari iOS Soporte completo 6Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo