MutationRecord: thuộc tính target

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.

Thuộc tính chỉ đọc target của MutationRecord là mục tiêu (tức nút đã bị biến đổi/thay đổi) của một biến đổi được quan sát bằng MutationObserver.

Giá trị

Node mà biến đổi tác động tới.

Nếu type của bản ghi là attributes, đây là Element có thuộc tính đã thay đổi.
Nếu type của bản ghi là characterData, đây là nút CharacterData.
Nếu type của bản ghi là childList, đây là nút có các phần tử con đã thay đổi.

Trong ví dụ sau, có hai div: một div đỏ (#red-div) và một div xanh (#blue-div), bên trong một div chứa #container. Một MutationObserver được tạo để quan sát container. Observer quan sát các thay đổi ở childList, và cũng có subtree: true để quan sát các thay đổi ở các phần tử con của container.

Callback của observer ghi lại target của bản ghi biến đổi. Khi chúng ta thêm nút vào #red-div hoặc #blue-div, target sẽ lần lượt là #red-div hoặc #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 });