Frikipandi – Web de Tecnología – Lo más Friki de la red. Web de Tecnología con las noticias más frikis de Internet. Noticias de gadgets, Hardware, Software, móviles e Internet. Frikipandi 
Hoy vamos a mejorar un poco nuescro javascript ¿Cómo detectar cambios en el DOM clases, estilos o atributos en el HML con JavaScript usando MutationObserver?
Veamos cómo «observar» nuestro DOM (ya sea el documento entero, un elemento div, spam, input o cualquier otro) y reaccionar al momento de detectar un cambio en su estado o contenido, para esto vamos a hacer uso de la clase MutationObserver.
MutationObserver establece un mecanismo para reaccionar ante cambios en el DOM. Ha sido diseñado como un sustituto de los Mutation Events definidos en las especificaciones de DOM3 Events.
Instanciando MutationObserver
Para hacer uso de esta clase solo debemos crear una instancia en nuestra web
var observer = new MutationObserver(callback);Parametro que recibe:
callback: Función que se ejecutara al momento de detectar un cambio
Metodo observe
Ahora debemos llamar el método observe y pasar 2 parámetros
observer.observe(nodo, configuracion);
Parametro que recibe:
nodo: Elemento del dom que se desea observar
configuracion: objeto con la configuración, para saber más consultar la documentación oficial
Métodos
void observe( Node target, MutationObserverInit options ); |
void disconnect(); |
Array takeRecords(); |
El array de configuración
Es un objeto para el que se pueden especificar las siguientes propiedades:
childList, attributes, o characterData deben ser true. En caso contrario, se producirá un error «An invalid or illegal string was specified»| Propiedad | Descripción |
childList | Establecer a true si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos text) han se ser observados. |
attributes | Establecer a true si los cambios en los atributos deben ser observados |
characterData | Establecer a true si los cambios en los datos deben ser observados |
subtree | Establecer a true si los cambios tambien deben ser observados en los descendientes. |
attributeOldValue | Establecer a true si attributes es true y el valor anterior al cambio debe ser guardado. |
characterDataOldValue | Establecer a true si characterData vale true y el dato anterior al cambio de be ser guardado. |
attributeFilter | Asigne un array de nombres de atributos locales (sin su espacio de nombres) si no necesita observar los cambios en todos los atributos |
Para ver como funciona pueden ver nuestro ejemplo buscamos una capa con la clase toolbar-directo__top y vemos cuando se le añade la clase open y sacamos un mensaje por consola la primera vez
var targetbar = document.querySelectorAll(".toolbar-directo__top")[0];
var configbar = {attributes: true};
var vecesbarra=0;
var observerbar = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var foobar =targetbar .getAttribute("class");
if (foobar == "toolbar-directo__top open"){
console.log('mutation open');
try{document.getElementsByClassName('toolbar-directo__top open')[0].classList.remove('open');} catch(err) { };
vecesbarra=vecesbarra+1;
if (vecesbarra>0){
observerbar.disconnect();}};
});
});
observerbar.observe(targetbar , configbar );
Puedes ver la documentación en https://developer.mozilla.org/es/docs/Web/API/MutationObserver
. Leer artículo completo en Frikipandi ¿Cómo detectar cambios en el DOM clases, estilos o atributos en el HML con JavaScript usando MutationObserver?.
