We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Draft
This page is not complete.

In the process of being updated for latest spec changes, as well as MDN style updates (sheppy).

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

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

disconnect()

Stops the MutationObserver instance from receiving notifications of DOM mutations. Until the observe() method is used again, the observer's callback will not be invoked.

void disconnect();

Note: According to specification a MutationObserver is deleted by the garbage collector if the target element is deleted.

takeRecords()

Empties the MutationObserver instance's record queue and returns what was in there.

Array takeRecords();
Return value

Returns an Array of MutationRecords.

MutationObserverInit

MutationObserverInit is an object which can specify the following properties:

Note: At the very least, one or more of childList, attributes, and characterData must be set to true. Otherwise a TypeError is thrown when you call observe().
Property Description
childList Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed. The default is false.
attributes Set to true if mutations to target's attributes are to be observed. No default value.
characterData Set to true if mutations to target's data are to be observed. No default value.
subtree Set to true if mutations to target and target's descendants are to be observed. Default value is false.
attributeOldValue Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded. No default value.
characterDataOldValue Set to true if characterData is set to true and target's data before the mutation needs to be recorded. No default value.
attributeFilter Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed. No default value.

Example usage

The following example was adapted from this blog post.

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

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

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var 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.');
        }
    }
};

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

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

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

See also

Specifications

Specification Status Comment
DOM
The definition of 'MutationObserver' in that specification.
Living Standard  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 18 -webkit
26
(Yes) 14 (14)[1] 11 15 6.0 -webkit
7
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 18 -webkit
26
(Yes) 14.0 (14)[1] 11 (8.1) 15 6 -webkit
7

[1] Prior to Firefox 61, the MutationObserverInit dictionary had a default value of false for all of its Boolean properties. Now only childList and subtree default to false; all other properties have no default value.