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

Aquí hay un escenario: Rita, una escritora de una revista está editando un artículo suyo en línea. Guarda sus cambios y ve el mensaje "¡se guardaron los cambios!" Justo en ese momento, nota un error tipográfico que se olvidó. Lo arregla y está a punto de hacer clic en "guardar", cuando recibe una llamada telefónica enojada de su jefe.

Cuando finaliza la llamada, vuelve a la pantalla, ve "¡cambios guardados!" Apaga su computadora y sale corriendo de la oficina.

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

Ya sabemos cómo hacer desaparecer un elemento de una página, por lo que no debería ser un problema. Lo que necesitamos saber es cuándo apareció? Entonces 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 nodo cambia, deberíamos poder conocerlo. Durante mucho tiempo, los desarrolladores tuvieron que recurrir a hacks y frameworks debido a la falta de una API nativa. Pero eso había cambiado.

Ahora tenemos MutationObserver (anteriormente Mutation Events). MutationObserver es un objeto nativo de JavaScript con un conjunto de propiedades y métodos. Nos permite observar un cambio en cualquier nodo como elemento DOM, documento, texto, etc. Por mutación, nos referimos a 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. Luego crearemos y vincularemos un observador de mutación a ese cuadro de mensaje y codificaremos la lógica para ocultar automáticamente el mensaje . ¿Comprensión?

Nota : Puede que en algún momento ya me hayas preguntado en tu cabeza " ¿Por qué no ocultar el mensaje desde el botón clic en el evento 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 muy fácilmente. Pero al igual que en la herramienta de edición de Rita, si el servidor es el que decide cambiar el contenido de DOM, el cliente solo puede permanecer 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 = 'cerceta'; } 

Una vez que hayamos ejecutado la configuración inicial, hagamos lo siguiente;

• Cree un objeto MutationObserver 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 MutationObserver .
• Crea un objeto config para especificar el tipo de mutaciones que observará el MutationObserver .
• Vincula el MutationObserver al objetivo, que es el div 'msg' en nuestro ejemplo.

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

A continuación hay una lista de propiedades para el objeto config que identifica los diferentes tipos de mutaciones. Como en nuestro ejemplo solo tratamos con un nodo de texto hijo creado para el texto del mensaje, hemos utilizado la propiedad childList .

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) {/ * Coge la primera mutación * / var mutationRecord = mutations [0]; / * Si se agregó un nodo secundario, oculte el mensaje después de 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000); } function hideMsg () {msg.textContent = ''; msg.style.background = 'none'; } 

Como solo estamos agregando un mensaje al div, obtendremos la primera mutación observada y comprobaremos si se insertó un nodo de texto. Si tenemos más de un cambio, podemos pasar por el conjunto de mutations .

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

Propiedades de MutationRecord

Y eso es. solo tenemos que armar el código para el paso final.

Soporte del navegador

• "W3C DOM4 Mutation Observer". W3C. Web. 19 de junio de 2015
• "MutationObserver". Mozilla Developer Network . Web. 19 de junio de 2015.

Dónde encontrar nuevos y buenos escritores (los mejores 5)

Entonces, estás buscando un escritor . Específicamente, estás buscando a alguien que pueda atraer los ojos a tu sitio web con palabras, de la misma manera que el Pied Piper puede alejar a los niños de Hamelin con música. ¡Eso es genial! Incluso con el advenimiento de los periodistas robot, no hay nada como dar el toque humano a la copia virtual.Por e

(Consejos de tecnología y diseño)

Aprenda Sass, HTML y CSS gratis en MarkSheet

El desarrollo web puede ser intimidante para un principiante completo. Hay muchos artículos y videos gratuitos para ayudarlo a aprender, pero todos varían en calidad y nivel de detalle.Es por eso que MarkSheet es un recurso tan valioso. Este extraordinario sitio web enseña HTML, CSS y Sass básico desde cero, a partir de los conceptos básicos de Internet y la World Wide Web.Cada

(Consejos de tecnología y diseño)