MutationRecord: target-Eigenschaft

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.

Die schreibgeschützte Eigenschaft target von MutationRecord ist das Ziel (d.h. der mutierte/veränderte Knoten) einer mit einem MutationObserver beobachteten Mutation.

Wert

Der Node, der von der Mutation betroffen ist.

  • Wenn der type der Aufzeichnung attributes ist, ist dies das Element, dessen Attribute sich geändert haben.
  • Wenn der type der Aufzeichnung characterData ist, ist dies der CharacterData-Knoten.
  • Wenn der type der Aufzeichnung childList ist, ist dies der Node, dessen Kinder sich geändert haben.

Beispiele

Protokollierung des Ziels einer Mutation

Im folgenden Beispiel gibt es zwei Divs: ein rotes Div (#red-div) und ein blaues Div (#blue-div), innerhalb eines Container-Divs #container. Ein MutationObserver wird erstellt, um den Container zu beobachten. Der Observer beobachtet Änderungen an der Kinderliste und hat auch subtree: true, damit er Änderungen an den Kindern der Kinder des Containers beobachtet.

Der Observer-Callback protokolliert das target der Mutation Record. Wenn wir dem #red-div oder dem #blue-div Knoten hinzufügen, wird das target entsprechend das #red-div oder das #blue-div sein.

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

Ergebnis

Spezifikationen

Specification
DOM
# ref-for-dom-mutationrecord-target②

Browser-Kompatibilität