क्या एक उत्परिवर्तन ऑब्सर्वर ऑब्जेक्ट एकाधिक लक्ष्यों को देख सकता है?

Question

मैं अपने कुछ डोम नोड्स में परिवर्तनों का निरीक्षण करने के लिए MutationObserver ऑब्जेक्ट का उपयोग करना चाहता हूं।

दस्तावेज़ MutationObserver ऑब्जेक्ट बनाने और इसे लक्ष्य पर पंजीकृत करने का एक उदाहरण देते हैं।

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

---

मैं ऊपर कोड है सकते हैं, लेकिन सिर्फ इसके तहत, मैं इस कोड को जगह:

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

विल observer:

अब

• होना 2 लक्ष्यों को देख?
• क्या यह target देख रहा है?
• क्या यह target2 का निरीक्षण न करने का निर्णय करेगा?
• क्या यह एक त्रुटि फेंक देगा?
• या यह कुछ अन्य व्यवहार प्रदर्शित करेगा?

Answer 1

पर्यवेक्षक अब आपकी परिभाषाओं के अनुसार दो लक्ष्य - target और target2 देख रहे होंगे। कोई त्रुटि नहीं फेंक दी जाएगी, और targettarget2 के पक्ष में "अनियंत्रित" नहीं होगा। कोई अप्रत्याशित या अन्य व्यवहार प्रदर्शित नहीं किया जाएगा।

यहां एक नमूना है जो दो सामग्री योग्य तत्वों पर उसी MutationObserver का उपयोग करता है। इसे देखने के लिए, प्रत्येक contenteditable तत्व से <span> नोड हटाएं और दोनों मनाए गए तत्वों में व्यवहार अवधि देखें।

<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 - डेमो

ध्यान दें कि मैं इस पहले प्रदर्शन के लिए एक ही config पुनर्नवीनीकरण किया है, लेकिन, एक नए config रखने कि मनाया तत्व के लिए विशेष हो जाएगा। पर उपयोग किए जाने पर config2 में परिभाषित अपना उदाहरण लेते हुए, आपको कॉन्फ़िगरेशन विकल्पों के अनुसार लॉग नोड दिखाई नहीं देगा, लेकिन ध्यान दें कि #myTextArea के लिए पर्यवेक्षक अप्रभावित है।

JSFiddle Link - डेमो - कॉन्फ़िगरेशन विशिष्टता