MutationRecord: target property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The MutationRecord read-only property target is the target (i.e. the mutated/changed node) of a mutation observed with a MutationObserver.

Value

The Node that the mutation affected.

  • If the record's type is attributes, this is the Element whose attributes changed.
  • If the record's type is characterData, this is the CharacterData node.
  • If the record's type is childList, this is the Node whose children changed.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support