MutationObserver

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

Constructor

MutationObserver()

Creates and returns a new MutationObserver which will invoke a specified callback function when DOM changes occur.

Instance methods

disconnect()

Stops the MutationObserver instance from receiving further notifications until and unless observe() is called again.

observe()

Configures the MutationObserver to begin receiving notifications through its callback function when DOM changes matching the given options occur.

takeRecords()

Removes all pending notifications from the MutationObserver's notification queue and returns them in a new Array of MutationRecord objects.

Example

The following example was adapted from this blog post.

js
// 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();

Specifications

Specification
DOM
# interface-mutationobserver

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MutationObserver
Chrome – Full support
Chrome 18 (Release date: 2012-03-28)
prefix
prefix Implemented with the vendor prefix: WebKit
Chrome – Full support
Chrome 26 (Release date: 2013-03-26)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 14 (Release date: 2012-07-17)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
prefix
prefix Implemented with the vendor prefix: WebKit
Safari – Full support
Safari 7 (Release date: 2013-10-22)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
prefix
prefix Implemented with the vendor prefix: WebKit
Chrome Android – Full support
Chrome Android 26 (Release date: 2013-04-03)
footnote Full support
Firefox for Android – Full support
Firefox for Android 14 (Release date: 2012-06-26)
footnote Full support
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 6 (Release date: 2012-09-10)
prefix
prefix Implemented with the vendor prefix: WebKit
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
prefix
prefix Implemented with the vendor prefix: WebKit
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
prefix
prefix Implemented with the vendor prefix: WebKit
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 6 (Release date: 2012-09-10)
prefix
prefix Implemented with the vendor prefix: WebKit
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
MutationObserver() constructor
Chrome – Full support
Chrome 18 (Release date: 2012-03-28)
prefix
prefix Implemented with the vendor prefix: WebKit
Chrome – Full support
Chrome 26 (Release date: 2013-03-26)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 14 (Release date: 2012-07-17)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
prefix
prefix Implemented with the vendor prefix: WebKit
Safari – Full support
Safari 7 (Release date: 2013-10-22)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
prefix
prefix Implemented with the vendor prefix: WebKit
Chrome Android – Full support
Chrome Android 26 (Release date: 2013-04-03)
footnote Full support
Firefox for Android – Full support
Firefox for Android 14 (Release date: 2012-06-26)
footnote Full support
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 6 (Release date: 2012-09-10)
prefix
prefix Implemented with the vendor prefix: WebKit
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
prefix
prefix Implemented with the vendor prefix: WebKit
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
prefix
prefix Implemented with the vendor prefix: WebKit
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 6 (Release date: 2012-09-10)
prefix
prefix Implemented with the vendor prefix: WebKit
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
disconnect
Chrome – Full support
Chrome 18 (Release date: 2012-03-28)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 14 (Release date: 2012-07-17)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 14 (Release date: 2012-06-26)
footnote Full support
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 6 (Release date: 2012-09-10)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 6 (Release date: 2012-09-10)
footnote Full support
observe
Chrome – Full support
Chrome 18 (Release date: 2012-03-28)
footnote
footnote Before Chrome 33, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Chrome throws a syntax error.
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote
footnote Before Edge 79, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Edge throws a syntax error.
Firefox – Full support
Firefox 14 (Release date: 2012-07-17)
footnote
footnote Before Firefox 36, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Firefox throws a syntax error.
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote
footnote Before Opera 20, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Opera throws a syntax error.
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote
footnote Before Safari 10.1, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Safari throws a syntax error.
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote
footnote Before Chrome Android 33, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Chrome Android throws a syntax error.
Firefox for Android – Full support
Firefox for Android 14 (Release date: 2012-06-26)
footnote
footnote Before Firefox for Android 36, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Firefox for Android throws a syntax error.
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote
footnote Before Opera Android 20, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Opera Android throws a syntax error.
Safari on iOS – Full support
Safari on iOS 6 (Release date: 2012-09-10)
footnote
footnote Before Safari iOS 10.3, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Safari throws a syntax error.
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote
footnote Before Samsung Internet 2.0, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Samsung Internet throws a syntax error.
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote
footnote Before WebView 4.4.3, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then WebView throws a syntax error.
WebView on iOS – Full support
WebView on iOS 6 (Release date: 2012-09-10)
footnote
footnote Before Safari iOS 10.3, attributes: true is required when using attributeFilter or attributeOldValue. If attributes: true is not present, then Safari throws a syntax error.
takeRecords
Chrome – Full support
Chrome 20 (Release date: 2012-06-26)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 14 (Release date: 2012-07-17)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 14 (Release date: 2012-06-26)
footnote Full support
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 6 (Release date: 2012-09-10)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 6 (Release date: 2012-09-10)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also