Reconnect and disconnect a MutationObserver

Question

This question is the sequel of this one. However, it is not necessary to read the previous, I'm just giving a link for interested readers.

There is an observer, which will react on every element with some class, as @Shomz suggested:

var target = document.querySelectorAll(".someclass");
for (var i = 0; i < target.length; i++) {
    create(target[i]);
}

function create(t) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var foo = t.getAttribute("aaa")
            if (foo == "vvv")
                t.style.backgroundColor = "red";
        });
    });

    var config = {
        attributes: true
    };

    observer.observe(t, config);
}

So, there are two closely intertwined questions.

1) For some reasons, the observer may be disconnected. How I can reconnect it? I tried to use observer.observe, but it doesn't work here.

2) And the second question, what is the way to manually disconnect an observer? I tried to use observer.disconnect();, but it is also doesn't work.

Answer 1

You actually do not have to use several instances to observe more than one DOM node element.
You can use one mutation observer to observe several DOM node elements.
To reconnect the observer after it has been disconnected you do not have to recreate a new instance of the mutation observer, you can just simply call the observe method on the already create instance again, but only after it has been disconnected.

disconnect()

Stops the MutationObserver instance from receiving notifications of DOM mutations. Until the observe() method is used again, observer's callback will not be invoked.

Calling the observe() method on an element that is already being observed will not have any effect on the observation. At least if you are using the same observer instance for the observation.

NOTE: Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it.

Here is an example using one observer instance observing the width attribute of a few image elements. The example is using a timeout to set a random value for each image width attribute. The callback function will output the changes and disconnect the observer and then start the whole process over again.

var imgs = Array.prototype.slice.call( document.images ),
    config = { attributes: true, attributeOldValue: true },
    observer = new MutationObserver( mutationCallback );

function mutationCallback ( mutations ) {
  mutations.forEach(function( record ) {
    record.target.previousElementSibling.textContent = "";
    record.target.previousElementSibling.textContent = "The image "
      + record.attributeName 
      + " attribute changed from " 
      + record.oldValue 
      + " to " 
      + record.target.getAttribute('width')
      + ".";
  })
  observer.disconnect();
  startObserving( imgs );
}

function changeNodeAttr ( attr, nodes ) {
  window.setTimeout(function() {
    nodes.forEach(function( node ) {
      node.setAttribute( attr, Math.floor( Math.random()*( 300 - 100 + 1 ) +100 ) );
    })
  }, 2500)
}

function startObserving ( nodes ) {
  nodes.forEach(function( node ) {
    observer.observe( node, config );
  })
  changeNodeAttr( "width", imgs );
}

startObserving( imgs );

body {
  font-family: sans-serif;
}

img {
  display: block;
  margin-bottom: 10px;
}

<span></span>
<img class="my-images" src="http://placehold.it/300x100?text=image" width="300">
<span></span>
<img class="my-images" src="http://placehold.it/300x200?text=image" width="300">
<span></span>
<img class="my-images" src="http://placehold.it/300x300?text=image" width="300">