javascript - uso - mutationobserver jquery

¿Puede un solo objeto MutationObserver observar múltiples objetivos?

Question

Me gustaría usar un objeto MutationObserver para observar los cambios en algunos de mis nodos DOM.

Los documentos dan un ejemplo de cómo crear un objeto MutationObserver y registrarlo en un destino.

// select the target node
var target = document.querySelector(''#some-id'');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

Digamos que tengo el código de arriba, pero justo debajo de él, coloco este código:

var target2 = document.querySelector(''#some-other-id'');
var config2 = {attributes: true, subtree: true};
observer.observe(target2, config2);

Se observer :

• Ahora se observan 2 objetivos?
• ¿dejará de observar el target ?
• ¿Decidirá no observar target2 ?
• tirará un error?
• ¿O exhibirá algún otro comportamiento?

Answer 1

El observador ahora estará observando dos objetivos: target y target2 según sus definiciones. No se lanzará ningún error, y target no se " target2 registro" a favor de target2 . No se exhibirán comportamientos inesperados u otros.

Aquí hay una muestra que utiliza el mismo MutationObserver en dos elementos contenteditable. Para ver esto, elimine el nodo <span> de cada elemento contenteditable y vea el intervalo de comportamiento en ambos elementos observados.

<div id="myTextArea" contenteditable="true">
    <span contenteditable="false">Span A</span>
</div>

<div id="myTextArea2" contenteditable="true">
    <span contenteditable="false">Span B</span>
</div>

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      //console.log($(mutation.removedNodes)); // <<-- includes text nodes

      $(mutation.removedNodes).each(function(value, index) {
          if(this.nodeType === 1) {
              console.log(this)
          }
      });
  });
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe($(''#myTextArea'')[0], config);

observer.observe($(''#myTextArea2'')[0], config);

JSFiddle Link - demo

Tenga en cuenta que he reciclado la misma configuración para esta primera demostración, pero la colocación de una nueva configuración será exclusiva del elemento observado. Si toma su ejemplo como se define en config2 , si se usa en #myTextArea2 , no verá el nodo registrado según las opciones de configuración, pero observe que el observador de #myTextArea no se ve afectado.

JSFiddle Link - demo - configuración exclusiva