How to use MutationObserver to track mutation on the DOM ?

About

MutationObserver is a web API function that permits to subscribe to change (ie mutation) in the dom and to react to them

You basically:

• Create a callback function that will be called for every mutation
• Create an observer object
• Subscribe to mutation from a designed element with the created observer.

The below section shows a basic example.

Example

• The call back function where mutationList is a list of mutation object and observer is the observer.

function subtreeCallback(mutationList, observer) {
  mutationList
     .filter(mutation => mutation.target.id=== "containerForAddedNodes" && mutation.type === "childList")
     .forEach( (mutation) => {
            mutation.addedNodes.forEach(node => {
                console.log(`A ${node.localName} child node was added in the ${mutation.target.localName} (${mutation.target.id}) with the text (${node.textContent})`);
            });
     });
}

• The observer

const observer = new MutationObserver(subtreeCallback);

• Options when subscribing / observing (ie which mutations to observe). We set them to observe only added nodes

const documentObserveOptions = { 
    childList: true,  // Set to true if mutations to target’s attributes are to be observed. 
    subtree: true, //Set to true if mutations to not just target, but also target’s descendants are to be observed.
};

• Observe the document

observer.observe(document.getElementById("observedId"), documentObserveOptions);

• The javascript that will modify the document on the click of the button

handleClick = (target) => {
   target.nextElementSibling.insertAdjacentHTML("beforeend", "<p>Clicked</p>");
}

• Adding a button to add element to the document

<div id="observedId">
    <button onClick="handleClick(this)">Click Me</button>
    <div id="containerForAddedNodes">
    </div>
</div>

Concept

Below you can find the properties of a mutation object.

Options

When subscribing / observing, you can set the subscribing options that target the type of mutation / changes that your want to subscribe.

Reference

Type

The type of the mutation object is just the option name

For instance:

Mutation Record

The object that you get back for each observation called the mutation record is described here

Documentation / Reference

• Spec
• Mozilla