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.

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>

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser