MutationRecord: target property
The MutationRecord
read-only property target
is the target (i.e. the mutated/changed node) of a mutation observed with a MutationObserver
.
Value
Examples
Logging the target of a mutation
In the following example, there are two divs: a red div (#red-div
) and a blue div (#blue-div
), inside a container div #container
. A MutationObserver
is created to observe the container. The observer is observing changes to the childlist, and also has subtree: true
so it will observe changes to the children of the container's children.
The observer callback logs the target
of the mutation record. When we add nodes to the #red-div
or the #blue-div
, the target
will be the #red-div
or the #blue-div
, respectively.
HTML
html
<pre id="log">Target of mutation:</pre>
<button id="add-nodes-to-red-div">Add a node to red div</button>
<button id="add-nodes-to-blue-div">Add a node to blue div</button>
<button id="reset">Reset</button>
<div id="container">
<div id="red-div"></div>
<div id="blue-div"></div>
</div>
JavaScript
js
const container = document.querySelector("#container");
const redDiv = document.querySelector("#red-div");
const blueDiv = document.querySelector("#blue-div");
const addToRed = document.querySelector("#add-nodes-to-red-div");
const addToBlue = document.querySelector("#add-nodes-to-blue-div");
const reset = document.querySelector("#reset");
const log = document.querySelector("#log");
addToRed.addEventListener("click", () => {
const newPara = document.createElement("p");
newPara.textContent = `Current time: ${Date.now()}`;
redDiv.appendChild(newPara);
});
addToBlue.addEventListener("click", () => {
const newPara = document.createElement("p");
newPara.textContent = `Current time: ${Date.now()}`;
blueDiv.appendChild(newPara);
});
reset.addEventListener("click", () => self.location.reload());
function logMutationTarget(records) {
for (const record of records) {
log.textContent = `Target of mutation: ${record.target.id}`;
}
}
const observer = new MutationObserver(logMutationTarget);
observer.observe(container, { childList: true, subtree: true });
Result
Specifications
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-target② |
Browser compatibility
BCD tables only load in the browser