W3cubDocs

/Web APIs

MutationRecord: type property

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 a mutation to the tree of nodes.

Examples

Log the type of a mutation

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>

JavaScript

js

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
type 16 12 14 11 15 7 4.4 18 14 14 7 1.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord/type