The MutationRecord
read-only property type
is the type of the MutationRecord
observed by a MutationObserver
.
The MutationRecord
read-only property type
is the type of the MutationRecord
observed by a MutationObserver
.
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.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>
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 });
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-type② |
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