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 des MutationRecord ist das Ziel (d.h. der mutierte/geänderte Knoten) einer Mutation, die mit einem MutationObserver beobachtet wird.

Wert

Der Node, den die Mutation beeinflusst hat.

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

Beispiele

Das Ziel einer Mutation protokollieren

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 Beobachter überwacht Änderungen an der Kinderliste und hat auch subtree: true, sodass er Änderungen an den Kindern der Kinder des Containers beobachtet.

Der Rückruf des Beobachters protokolliert das target des Mutationseintrags. Wenn wir Knoten zu #red-div oder #blue-div hinzufügen, wird das target entsprechend #red-div oder #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

BCD tables only load in the browser