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

MutationObserver provides developers with a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.



Constructor for instantiating new DOM mutation observers.

new MutationObserver(
  function callback
The function which will be called on each DOM mutation. The observer will call this function with two arguments. The first is an array of objects, each of type MutationRecord. The second is this MutationObserver instance.

Instance methods

void observe( Node target, MutationObserverInit options );
void disconnect();
Array takeRecords();

Note: Node target should not be confused with NodeJS.


Registers the MutationObserver instance to receive notifications of DOM mutations on the specified node.

void observe(
  Node target,
  MutationObserverInit options
The Node on which to observe DOM mutations.
A MutationObserverInit object, specifies which DOM mutations should be reported.
Note: Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe an element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it.


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.


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

Array takeRecords();
Return value

Returns an Array of MutationRecords.


MutationObserverInit is an object which can specify the following properties:

Note: At the very least, childList, attributes, or characterData must be set to true. Otherwise, "An invalid or illegal string was specified" error is thrown.
Property Description
childList Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.
attributes Set to true if mutations to target's attributes are to be observed.
characterData Set to true if mutations to target's data are to be observed.
subtree Set to true if mutations to target and target's descendants are to be observed.
attributeOldValue Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded.
characterDataOldValue Set to true if characterData is set to true and target's data before the mutation needs to be recorded.
attributeFilter Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.

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

Additional reading


Specification Status Comment
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
(Yes) 14 (14) 11 15 6.0 -webkit
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 18 -webkit
(Yes) 14.0 (14) 11 (8.1) 15 6 -webkit