Cómo utilizar la API de MutationObserver para cambios de nodo DOM

Aquí hay un escenario: Rita, una escritora de revistas está editando un artículo de ella en línea. Ella guarda sus cambios, y ve el mensaje. “Cambios guardados!” En ese momento, se da cuenta de un error tipográfico que se perdió. Ella lo arregla y está a punto de hacer clic. “salvar”, cuando ella recibe una llamada telefónica enojada de su jefe.

Después de que termina la llamada, vuelve a la pantalla y ve a “Cambios guardados!” Apaga su computadora y sale de la oficina.

Aparte de mi ineptitud para contar historias, en ese breve escenario notamos los problemas que generó ese mensaje persistente. Por lo tanto, en el futuro, decidimos evitarlo cuando sea posible y usar uno que indique al usuario que lo confirme haciendo clic en él o desaparece por sí solo. Usar el segundo para mensajes rápidos es una buena idea..

Ya sabemos cómo hacer que un elemento desaparezca de una página, por lo que no debería ser un problema. Lo que necesitamos saber es cuando aparecio? Así que podemos hacer que desaparezca después de un tiempo plausible..

API MutationObserver

En general, cuando un elemento DOM (como un mensaje div) o cualquier otro cambio de nodo, deberíamos poder saberlo. Durante mucho tiempo, los desarrolladores tuvieron que confiar en hacks y frameworks debido a la falta de una API nativa. Pero eso había cambiado..

Ahora tenemos MutationObserver (Anteriormente Eventos de Mutación). MutationObserver es un objeto nativo de JavaScript con un conjunto de propiedades y métodos. Nos deja observar un cambio en cualquier nodo como elemento DOM, documento, texto, etc. Por mutación, queremos decir la adición o eliminación de un nodo y los cambios en los atributos y datos de un nodo.

Veamos un ejemplo para una mejor comprensión. Primero haremos una configuración donde aparezca un mensaje al hacer clic en el botón, como el que vio Rita. Pues crear y vincular un observador de mutaciones a ese cuadro de mensaje y Codificar la lógica para ocultar automáticamente el mensaje.. Comprensión?

Nota: Usted puede en algún momento o ya me ha preguntado en su cabeza “¿Por qué no ocultar el mensaje dentro del evento de clic de botón en JavaScript??” En mi ejemplo, no estoy trabajando con un servidor, por lo que, por supuesto, el cliente es responsable de mostrar el mensaje y puede ocultarlo con demasiada facilidad. Pero al igual que en la herramienta de edición de Rita, si el servidor es el que decide cambiar el contenido del DOM, el cliente solo puede mantenerse alerta y esperar..

Primero, creamos la configuración para mostrar el mensaje al hacer clic en el botón.

 Mostrar mensaje

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Cambios guardados!"; / * Agregar evento de clic de botón * / document .querySelector ('button') .addEventListener ('click', showMsg); función showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Una vez que tenemos la configuración inicial en ejecución, hagamos lo siguiente;

• Crear un MutationObserver objeto con una función de devolución de llamada definida por el usuario (la función se define más adelante en la publicación). La función se ejecutará en cada mutación observada por el MutationObserver.
• Cree un objeto de configuración para especificar el tipo de mutaciones que deben ser observadas por el MutationObserver.
• Atar el MutationObserver al objetivo, que es el 'msg' div en nuestro ejemplo.

(function startObservation () var / * 1) Crea un objeto MutationObserver * / observer = new MutationObserver (function (mutations) mutationObserverCallback (mutations);), / * 2) Crea un objeto de configuración * / config = childList: cierto; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

A continuación se muestra una lista de propiedades para el configuración Objeto identificando los diferentes tipos de mutaciones. Ya que en nuestro ejemplo solo tratamos con un nodo de texto secundario creado para el texto del mensaje, hemos usado el lista de niños propiedad.

Tipos de mutaciones observadas

Ahora, a esa función de devolución de llamada que se ejecuta en cada mutación observada.

function mutationObserverCallback (mutations) / * Agarra la primera mutation * / var mutationRecord = mutations [0]; / * Si se agregó un nodo secundario, oculte el msg después de 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Ya que solo estamos agregando un mensaje a la div, solo tomaremos la primera mutación observada en ella y verificaremos si se insertó un nodo de texto. Si ocurriera más de un cambio, simplemente podemos recorrer el mutaciones formación.

Cada mutación en el mutaciones la matriz está representada por el objeto Registro de mutación con las siguientes propiedades.

Propiedades de Registro de mutación

Y eso es. Solo tenemos que poner el código juntos para el paso final..

Soporte del navegador

Referencia

• “W3C DOM4 Mutation Observer.” W3C. Web. 19 de junio de 2015
• “MutationObserver.” Red de desarrolladores de Mozilla. Web. 19 de junio de 2015.