¿Cómo detectar cambios en el DOM clases, estilos o atributos en el HML con JavaScript usando MutationObserver?

¿Cómo detectar cambios en el DOM clases, estilos o atributos en el HML con JavaScript usando MutationObserver?

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 observeNode target, MutationObserverInit options );
void disconnect();
Array takeRecords();
 

El array de configuración

Es un objeto para el que se pueden especificar las siguientes propiedades:

NOTA: Como mínimo las propiedades childListattributes, o characterData deben ser true. En caso contrario, se producirá un error «An invalid or illegal string was specified»
PropiedadDescripción
childListEstablecer a true si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos text) han se ser observados.
attributesEstablecer a true si los cambios en los atributos deben ser observados
characterDataEstablecer a true si los cambios en los datos deben ser observados
subtreeEstablecer a true si los cambios tambien deben ser observados en los descendientes.
attributeOldValueEstablecer a true si attributes es true y el valor anterior al cambio debe ser guardado.
characterDataOldValueEstablecer a true si characterData vale true y el dato anterior al cambio de be ser guardado.
attributeFilterAsigne 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

Te interesa

Descubre la historia de ABBA Voyage

Descubre la historia de ABBA Voyage

Descubre la historia de ABBA Voyage Como uno de los grupos más exitosos de la historia …

Últimas noticias de Frikipandi.com

Las noticias se actualizan cada 15 minutos.