MutationRecord: target 属性

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

值

受突变影响的 Node。

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

示例

记录突变的目标

在以下示例中，有两个 div：一个红色 div（#red-div）和一个蓝色 div（#blue-div），位于容器 div #container 内。创建一个 MutationObserver 来观察容器。观察者正在观察子列表的变化，并且还具有 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②

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。