2022-05-26T11:01:35+02:00

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

Juan Cascón Baños Actualizada: 26/05/2022 11:01 Creada: 26/05/2022 Destacada, Tecnología

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:

NOTA: Como mínimo las 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?.