MutationObserver | Frontend Practical Guide

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`MutationObserver`	26	12	14	7	26	7
`disconnect` The MutationObserver method disconnect() tells the observer to stop watching for mutations.	18	12	14	6	18	6
`MutationObserver` The DOM MutationObserver() constructor — part of the MutationObserver interface — creates and returns a new observer which invokes a specified callback when DOM events occur.	26	12	14	7	26	7
`observe` The MutationObserver method observe() configures the MutationObserver callback to begin receiving notifications of changes to the DOM that match the given options.	18	12	14	6	18	6
`takeRecords` The MutationObserver method takeRecords() returns a list of all matching DOM changes that have been detected but not yet processed by the observer's callback function, leaving the mutation queue empty.	20	12	14	6	25	6
`MutationRecord` The MutationRecord is a read-only interface that represents an individual DOM mutation observed by a MutationObserver. It is the object inside the array passed to the callback of a MutationObserver.	16	12	14	7	18	7
`addedNodes` The MutationRecord read-only property addedNodes is a NodeList of nodes added to a target node by a mutation observed with a MutationObserver.	16	12	14	7	18	7
`attributeName` The MutationRecord read-only property attributeName contains the name of a changed attribute belonging to a node that is observed by a MutationObserver.	16	12	14	7	18	7
`attributeNamespace` The MutationRecord read-only property attributeNamespace is the namespace of the mutated attribute in the MutationRecord observed by a MutationObserver.	16	12	14	7	18	7
`nextSibling` The MutationRecord read-only property nextSibling is the next sibling of an added or removed child node of the target of a MutationObserver.	16	12	14	7	18	7
`oldValue` The MutationRecord read-only property oldValue contains the character data or attribute value of an observed node before it was changed.	16	12	14	7	18	7
`previousSibling` The MutationRecord read-only property previousSibling is the previous sibling of an added or removed child node of the target of a MutationObserver.	16	12	14	7	18	7
`removedNodes` The MutationRecord read-only property removedNodes is a NodeList of nodes removed from a target node by a mutation observed with a MutationObserver.	16	12	14	7	18	7
`target` The MutationRecord read-only property target is the target (i.e., the mutated/changed node) of a mutation observed with a MutationObserver.	16	12	14	7	18	7
`type` The MutationRecord read-only property type is the type of the MutationRecord observed by a MutationObserver.	16	12	14	7	18	7

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    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.`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

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

Use cases

Using MutationObserver

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.

Cautions

May not be supported in older browsers.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Browser support

Syntax

Use cases

Using MutationObserver

Cautions

Implementation notes

Related links