Confused About MutationObserver

Question

So I have been rattling my brain about using the MutationObserver and I haven't made any progress. I've read about it on the W3C site and in the MDN. When reading it in the MDN, everything made sense until the example.

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

// later, you can stop observing
observer.disconnect();

The part I'm having the most trouble with is creating the observer instance, not sure the syntax of what belongs there. Also in the console I've been getting a "TypeError: Value does not implement interface Node." No matter which examples I've looked at and tried using; replacing the selectors in the example with the desired jQuery selectors (also non-jQ selectors returned the same problem).

Answer 1

first you definitely should not use jQ selectors as they are not Node elements. second, you must be sure that query selector returns not null. To make sure try for the first time observer on document.body: it is definitely a Node object. Something like

(
    new MutationObserver(function(mutationEventList){
        console.log(mutationEventList)
    })
)
.observe(document.body, {
    childList: true,
    attributes: true,
    characterData: true
})

When you will get familiar with targeting an observer and understand MutationObserverInit options values(they are described not as good as it could) you will be able to work with mutationObserver right.

Answer 2

MutationObserver is a very powerful feature that lets you monitor all types of changes on a node/object in the DOM. In their example, they create the observer here:

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

and call it here:

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

the target is a node, and the config tells it what to monitor on that node. There are various things you can monitor, and in their example they are monitoring when changes happen to the attributes, childList, and characterData. If any of those items change due to javascript manipulation or user action, observer will fire and give you information about what changed and let you take action based on the type of change. It's easiest to see it happen in the console.

To test, make sure you have a valid target selected with:

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

Answer 3

Simple MutationObserver:

<div contentEditable id="myID">EDIT TO FIRE</div>
<script>
let x = new MutationObserver(   function(){ alert('FIRED'); }   );
x.observe(  myID , {subtree:true, characterData:true}  );
</script>

See Live: https://jsfiddle.net/bg8k0jmy/