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 ⁨Juli 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.

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>

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