MutationObserver object

Monitors and records changes to the DOM for specified nodes and invokes a callback function for reacting to those changes.

Note  Mutation Observers (W3C DOM4) are intended to replace the now deprecated Mutation Events defined in the W3C DOM Level 3 Events specification.



var observer = new MutationObserver(callback);

DOM Information

Inheritance Hierarchy

The MutationObserver does not inherit from any class or interface.


The MutationObserver object has these types of members:


The MutationObserver object has these methods.


Stops a MutationObserver from monitoring changes to the DOM nodes registered to it.


Registers a node to observe and specifies the change information to record.


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



A MutationObserver object can be used to observe specified changes (such as the addition or removal of child nodes, changes to attributes, and / or changes to child text node values) on one or more DOM nodes.

Once you create a new MutationObserver object, use the observe method to register it on the node you wish to monitor and to specify the types of information you wish to collect.

The callback function you provide to the MutationObserver constructor will be invoked whenever any relevant changes happen to your target element(s), but not until all script within the current scope has run. It is possible that more than one mutation (each represented by a single MutationRecord) might have occurred since the last time the callback was invoked.

When called, your callback function will be invoked with two parameters:

  • An array of MutationRecords representing the changes that occurred on the element (or elements)
  • A reference to the MutationObserver object that invoked the callback

The MutationObserver's array of MutationRecords will accumulate all relevant changes until the takeRecords method is called, which empties the queue and returns the records that were previously there.


<div id="test" dir="ltr">An element to observe.</div>
  var targetObject = document.getElementById('test');

  // Create an observer object and assign a callback function.
  var observerObject = new MutationObserver(mutationObjectCallback);

  // Register the target node to observe and specify which DOM changes to watch.
  observerObject.observe(targetObject, { 
    attributes: true,
    attributeFilter: ["id", "dir"],
    attributeOldValue: true,
    childList: true

  // This will invoke the mutationObjectCallback function (but only after all script in
  // this scope has run). For now, it simply queues a MutationRecord object with the change info.

  // Now a second MutationRecord object will be added, this time for an attribute change.
  targetObject.dir = 'rtl';

  // Inspect the array of MutationRecord objects to identify the nature of the change.
  function mutationObjectCallback(mutationRecordsList) {
    console.log("mutationObjectCallback invoked.");

    mutationRecordsList.forEach(function(mutationRecord) {
      console.log("Type of mutation: " + mutationRecord.type);
      if ("attributes" === mutationRecord.type) {
        console.log("Old attribute value: " + mutationRecord.oldValue);

See also

Mutation Observers