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 MD

Answer 1

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/

Answer 2

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 3

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