MutationRecord: target 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

MutationRecord 的只读属性 target 是使用 MutationObserver 观察到的突变的目标（即，发生突变/更改的节点）。

值

突变影响的 Node。

如果记录的 type 是 attributes，则这是属性发生更改的 Element。
如果记录的 type 是 characterData，则这是 CharacterData 节点。
如果记录的 type 是 childList，则这是子节点发生更改的 Node。

示例

记录突变的目标

在下面的示例中，有两个 div：一个红色 div (#red-div) 和一个蓝色 div (#blue-div)，它们都在一个容器 div #container 内部。创建了一个 MutationObserver 来观察容器。该观察者正在观察 childlist 的更改，并且还设置了 subtree: true，因此它将观察容器子节点的子节点的更改。

观察者回调记录突变记录的 target。当我们将节点添加到 #red-div 或 #blue-div 时，target 分别是 #red-div 或 #blue-div。

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>

#log {
  border: 1px dotted black;
  padding: 0.5rem;
}

#red-div {
  border: 1px solid red;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.5rem;
  overflow: auto;
}

#blue-div {
  border: 1px solid blue;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  padding: 0.5rem;
  overflow: auto;
}

#container {
  display: grid;
  grid-template-columns: 50% auto;
}

JavaScript

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 });

结果

规范

规范
DOM # ref-for-dom-mutationrecord-target②

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后一次修改于 ⁨2025年4月3日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题