The MutationRecord
read-only property target
is the target (i.e. the mutated/changed node) of a mutation observed with a MutationObserver
.
The MutationRecord
read-only property target
is the target (i.e. the mutated/changed node) of a mutation observed with a MutationObserver
.
The Node
that the mutation affected.
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
<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>
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 });
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-target② |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
target |
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/target