Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can a single MutationObserver object observe multiple targets?

I would like to use a MutationObserver object to observe changes to some of my DOM nodes.

The docs give an example of creating a MutationObserver object and registering it on a target.

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

Say I have the code above, but just under it, I place this code:

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

Will observer:

  • now be observing 2 targets?
  • will it stop observing target?
  • will it decide not to observe target2?
  • will it throw an error?
  • or will it exhibit some other behavior?
like image 548
Luke Avatar asked Jun 12 '15 16:06

Luke


People also ask

How do mutation observers work?

MutationObserver is a Web API provided by modern browsers for detecting changes in the DOM. With this API one can listen to newly added or removed nodes, attribute changes or changes in the text content of text nodes.

Is MutationObserver slow?

Yes, it's finally slower by just 10% or even less in recent versions of Chrome. @Bergi, it's for the case when processing is complex and takes a lot of time. MutationObserver runs in a microtask queue so multiple callbacks may still reside in one task, which can lead to very long paint frames and jank.

How do you observe DOM changes?

One way to watch for DOM changes in our JavaScript web app is to use the MutationObserver constructor. For instance, we can write: const observer = new MutationObserver((mutations, observer) => { console. log(mutations, observer); }); observer.


1 Answers

The observer will now be watching two targets - target and target2 per your definitions. No error will be thrown, and target will not be "unregistered" in favor of target2. No unexpected or other behaviors will be exhibited.

Here is a sample which uses the same MutationObserver on two contenteditable elements. To view this, delete the <span> node from each contenteditable element and view the behavior span across both observed elements.

<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

Note that I have recycled the same config for this first demo, but, placing a new config will be exclusive to that observed element. Taking your example as defined in config2, if used on #myTextArea2, you'll not see the logged node per the configuration options, but notice that the observer for #myTextArea is unaffected.

JSFiddle Link - demo - configuration exclusiveness

like image 164
scniro Avatar answered Sep 30 '22 02:09

scniro