MutationObserver Web API

MutationObserver Web API, what is it?

The MutationObserver Web API is, according to MDN, an interface which provides the ability to watch for changes being made to the DOM tree. An example of a change made to the DOM tree could be something like a class, id, or any other attribute being added or removed to or from an element. Another example could be something like an element being removed from the DOM, or an element being added to the DOM.

Getting to know the MutationObserver

We start by defining a new instance of the MutationObserver as observer. The callback function in our instance of the MutationObserver is where we can start reacting to events.

const observer = new MutationObserver(function(mutationsList, observer) {

}); 

We want to loop through the mutationsList which we receive in said callback as it is an array. Within our loop we can now react to individual events through mutation.

const observer = new MutationObserver(function(mutationsList, observer) {
  for(const mutation of mutationsList) {
     console.log("a single mutation: ", mutation);
    }
}); 

Every mutation that our callback provides us with has a mutation type letting us know which sort of mutation we are looking at.

There are three different mutation types:

• childList
• attributes
• characterData

const observer = new MutationObserver(function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
        else if(mutation.type === 'characterData'){
            console.log(mutation);
        }
    }
});

Now that we have our instance of the MutationObserver stored in our variable observer, we can provide it with a reference to an element it should listen to for mutations, as well as a configuration object telling it which mutation types it should let our callback know about.

// the observer instance is up here

observer.observe(document.querySelector("#some-id"), { attributes: false, childList: true });

The MutationObserver in action

Using the example that we have been building through this guide, we can see exactly how the MutationObserver behaves.

Here we are before any changes to the element we are listening to for mutations, have happened.

Here we are after having clicked the button to change the title.

And here we can see the mutation in details. At the top we can see that a node was added, specifically a text node. This node is the text that our title was changed to.

Further down we can see that a node was also removed, also a text node. This node is the text that our title contained before it was changed.

Taking a closer look at the addedNodes, we can see that the data property indeed contains the text which now resides in our title.

Conclusion

Depending on your situation, the MutationObserver can be immensely useful.

The MutationObserver can do way more than what I covered in this guide, and I have used it to great length and even built a small framework around it to help my coworkers who aren't as strong in JavaScript utilize it.

If any interest is shown, I might make a guide going through the framework I made and show how you can use the MutationObserver without fully understanding how it works.

Disclaimer I am by no means an expert and I do not claim that everything I have said is correct, if you find any misinformation or otherwise misleading or wrong explanations, please reach out to me so I can correct it.