MutationRecord: type property

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 MutationRecord read-only property type is the type of the MutationRecord observed by a MutationObserver.

Value

The property is set to the type of the mutation as a string. The value can be one of the following:

attributes if the mutation was an attribute mutation.
characterData if it was a mutation to a CharacterData node.
childList if the mutation was a mutation to the tree of nodes.

The following example gives you two buttons to manipulate the DOM. The first button adds a new node to the example, and the second button changes the color attribute of all the added nodes. A MutationObserver is created to observe it all, and the observer is set to log the type of the mutation record to #log.

You'll notice the when you add a node, the type is childList, and when you change the color attribute, the type is attributes.

HTML

html

<button id="add-nodes">Add a node</button>
<button id="set-attribute">Change the color</button>

<button id="reset">Reset</button>

<pre id="log">Mutation type:</pre>
<div id="target"><p>Node #0</p></div>

#log {
  border: 1px dotted black;
  padding: 0.5rem;
}

.blue {
  color: blue;
}

.red {
  color: red;
}

JavaScript

const addNodes = document.querySelector("#add-nodes");
const setAttribute = document.querySelector("#set-attribute");
const reset = document.querySelector("#reset");
const log = document.querySelector("#log");
const target = document.querySelector("#target");
let nodeNumber = 1;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Node #${nodeNumber}`;
  nodeNumber++;
  target.appendChild(newPara);
});

setAttribute.addEventListener("click", () => {
  if (target.getAttribute("class") === "red") {
    target.setAttribute("class", "blue");
  } else {
    target.setAttribute("class", "red");
  }
});

reset.addEventListener("click", () => self.location.reload());

function logMutationType(records) {
  for (const record of records) {
    log.textContent = `Mutation type: ${record.type}`;
  }
}

const observer = new MutationObserver(logMutationType);
observer.observe(target, { childList: true, attributes: true, subtree: true });

Result

Specifications

Specification
DOM Standard # ref-for-dom-mutationrecord-type②

Browser compatibility

BCD tables only load in the browser