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 aCharacterData
node. -
childList
if the mutation was 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
<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
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