Un singolo oggetto MutationObserver può osservare più destinazioni?

Question

Desidero utilizzare un oggetto MutationObserver per osservare le modifiche ad alcuni dei miei nodi DOM.

I documenti forniscono un esempio di creazione di un oggetto MutationObserver e di registrazione su una destinazione.

// 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); 

---

Dire che ho il codice di cui sopra, ma proprio in virtù di esso, ho inserire questo codice:

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

Will observer:

• ora osservando 2 obiettivi?
• interromperà l'osservazione target?
• deciderà di non osservare target2?
• genera un errore?
• o mostrerà qualche altro comportamento?

Answer 1

L'osservatore ora sta guardando due obiettivi - target e target2 per le proprie definizioni. Nessun errore verrà generato e target non sarà "non registrato" a favore di target2. Non verranno mostrati comportamenti imprevisti o di altro tipo.

Ecco un esempio che utilizza lo stesso MutationObserver su due elementi contenteditable. Per visualizzare questo, eliminare il nodo <span> da ciascun elemento contenteditable e visualizzare il comportamento su entrambi gli elementi osservati.

<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

Nota che ho riciclato la stessa configurazione di questo primo demo, ma, ponendo una nuova configurazione sarà esclusiva per quell'elemento osservata. Prendendo il tuo esempio come definito in config2, se usato su #myTextArea2, non vedrai il nodo registrato per le opzioni di configurazione, ma noterai che l'osservatore per #myTextArea non è interessato.

JSFiddle Link - demo - configurazione esclusività