0

Hace poco aprendí, gracias a un usuario de StackOverflow, el funcionamiento del objeto MutationObserver y me ha surgido la duda.

¿Puede un solo objeto MutationObserver observar más de un target y avisar de cambios en cualquiera de ellos?

De momento sé hacer que MutationObserver observe un objetivo en particular:

let target = document.querySelector('#react-root');

let options = {
 childList: true,
 subtree: true
};

let observer = new MutationObserver(function(mutations) {
 console.log(¡Se ha modificado el DOM!);
});

observer.observe(target, options);

Mi intención es hacerla posible con tres objetivos.

1 respuesta 1

0

si, es posible. Con volver a llamar .observe y pasarle otro elemento vas a ver que vuelve a dispararse el callback cuando se mute cualquiera de los elementos siendo observados.

Si te interesa disparar distintas acciones segun de donde venga la mutacion o que tipo de mutacion sea podes revisar la mutation list como te muestro en mi ejemplo.

https://jsfiddle.net/gsabetta/r1kqfedm/

const one = document.getElementById('one');
const two = document.getElementById('two');
const three = document.getElementById('three');


// Cada vez que los clickeas, se muta un atributo
[one, two, three].forEach(elem => elem.addEventListener('click', function() {
    this.dataset.random = Math.random();
}));


const config = {
 attributes: true,
 childList: true,
 subtree: true,
};

const observer = new MutationObserver((mutationList) => {
    const mutation = mutationList[0]
  console.log(`MUTADO!`);
  if (mutation.target == one) {
    console.log('Div uno fue mutado')
  }
});

observer.observe(one, config);
observer.observe(two, config);
observer.observe(three, config);
<h1 id="one">Hi</h1>
<h2 id="two">Howdy</h2>
<h3 id="three">Bye</h3>

Espero que te sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.