How to use MutationObserver to track mutation on the DOM ?



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.


  • The call back function where mutationList is a list of mutation object and observer is the observer.
function subtreeCallback(mutationList, observer) {
     .filter(mutation => "containerForAddedNodes" && mutation.type === "childList")
     .forEach( (mutation) => {
            mutation.addedNodes.forEach(node => {
                console.log(`A ${node.localName} child node was added in the ${} (${}) 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.
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">


Below you can find the properties of a mutation object.


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

Property Description
childList Set to true if mutations to target’s attributes are to be observed.
subtree Set to true if mutations to not just target, but also target’s descendants are to be observed.
attributes Set to true if mutations to target’s children are to be observed.
characterData Set to true if mutations to target’s data are to be observed.
attributeOldValue Set to true if attributes is true or omitted and target’s attribute value before the mutation needs to be recorded.
characterDataOldValue Set to true if characterData is set to true or omitted and target’s data before the mutation needs to be recorded.
attributeFilter Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted.



The type of the mutation object is just the option name

For instance:

Type Description
childList One or more children have been added to and/or removed from the tree
attributes An attribute value changed on the element in
The attribute name is in mutation.attributeName
The previous value is in mutation.oldValue.

Mutation Record

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

Documentation / Reference

Discover More
Browser Chrome Dom Elements Panel
Browser - DOM

This page is the DOM functionality in the browser. A browser has more object model (OM) To see the DOM in a browser, you use the devtools. The DOM is represented in the Elements panel. Example...
DOM - Element

An element is the most common type of node in the DOM. When you want to do something to an element, first you need to select it. A dom element is generally the memory representation of: an HTML element...
HTML - Attribute

HTML An attribute in HTML is an XML attribute of an HTML element Attribute names are TR/html-markup/documents.htmlcase-insensitive. Classes and IDs are attributes used in the selection of element....
Javascript - Web API (Browser Builtin API )

The Web API is a collection of javascript function (API) that a browser implements. It implements: principally the API of the DOM. and others specific browser function ... This is...

Share this page:
Follow us:
Task Runner