MutationRecord.target — Eigenschaft · JavaScript-Referenz

Signatur

MutationRecord.target

Beschreibung

Die Eigenschaft MutationRecord.target ist schreibgeschützt und gibt den Node zurück, an dem eine Mutation beobachtet wurde. Welcher Knoten das genau ist, hängt vom Typ der Mutation ab (MutationRecord.type):

"attributes": das Element, dessen Attribut geändert wurde.
"characterData": der CharacterData-Knoten selbst (z. B. ein Text- oder Comment-Knoten).
"childList": der Elternknoten, dessen Kindliste sich geändert hat – nicht die hinzugefügten oder entfernten Kinder selbst. Diese stehen in addedNodes bzw. removedNodes.

Wichtig ist target vor allem dann, wenn man mit subtree: true einen ganzen Teilbaum beobachtet: Der Observer ist nur an einem Wurzelknoten registriert, die Änderungen passieren aber auf beliebigen Nachfahren. Über target lässt sich ermitteln, wo genau im Baum etwas passiert ist – etwa um nur auf Änderungen an bestimmten Elementen zu reagieren oder sie per closest() einer Komponente zuzuordnen.

Der Rückgabewert ist eine Live-Referenz auf den Knoten. Wenn der Callback ausgeführt wird, kann sich der Knoten bereits weiter verändert haben oder sogar aus dem Dokument entfernt worden sein, da Mutationen gesammelt und asynchron (als Mikrotask) ausgeliefert werden.

Rückgabewert

Typ

Node

Beschreibung

Der Knoten, der von der Mutation betroffen ist: das Element (bei attributes), der Text-/Kommentarknoten (bei characterData) oder der Elternknoten (bei childList).

Beispiele

Attributänderungen im Teilbaum dem Element zuordnen

const liste = document.createElement('ul');
liste.innerHTML = '<li id="a">A</li><li id="b">B</li>';
document.body.append(liste);

const observer = new MutationObserver((records) => {
  for (const record of records) {
    // target ist das <li>, dessen Attribut sich geändert hat
    console.log(`${record.target.id}: ${record.attributeName} geändert`);
  }
});

observer.observe(liste, { attributes: true, subtree: true });

document.getElementById('b').classList.add('aktiv');
document.getElementById('a').setAttribute('data-status', 'fertig');

b: class geändert a: data-status geändert

childList: target ist der Elternknoten

const container = document.createElement('div');
container.id = 'container';
const inner = document.createElement('section');
inner.id = 'inner';
container.append(inner);
document.body.append(container);

const observer = new MutationObserver((records) => {
  for (const { type, target, addedNodes } of records) {
    if (type === 'childList') {
      const namen = [...addedNodes].map((n) => n.nodeName).join(', ');
      console.log(`Eltern: #${target.id}, hinzugefügt: ${namen}`);
    }
  }
});

observer.observe(container, { childList: true, subtree: true });

inner.append(document.createElement('p'));
container.append(document.createElement('footer'));

Eltern: #inner, hinzugefügt: P Eltern: #container, hinzugefügt: FOOTER

characterData: Textänderung einer Komponente zuordnen

const karte = document.createElement('article');
karte.dataset.komponente = 'karte';
karte.innerHTML = '<h2>Titel</h2>';
document.body.append(karte);

const observer = new MutationObserver((records) => {
  for (const record of records) {
    // target ist hier der Text-Knoten, daher parentElement verwenden
    const text = record.target;
    const komponente = text.parentElement?.closest('[data-komponente]');
    console.log(`Neuer Text "${text.data}" in ${komponente?.dataset.komponente}`);
  }
});

observer.observe(karte, { characterData: true, subtree: true });

karte.querySelector('h2').firstChild.data = 'Neuer Titel';

Neuer Text "Neuer Titel" in karte

// Wichtig · Fallstricke

Häufiger Irrtum bei childList: target ist der Elternknoten, nicht das eingefügte oder entfernte Element. Dafür addedNodes/removedNodes auswerten.
Bei characterData ist target ein Text- oder Comment-Knoten und kein Element – Methoden wie closest() oder classList gibt es dort nicht. Erst über parentElement zum Element wechseln.
Mutationen werden gebündelt und asynchron ausgeliefert. Wenn der Callback läuft, kann target bereits erneut verändert oder aus dem Dokument entfernt sein (Prüfung z. B. mit target.isConnected). Für den alten Wert attributeOldValue bzw. characterDataOldValue aktivieren und oldValue lesen.
Ändert der Callback selbst target, erzeugt das neue Records – ohne Schutzbedingung droht eine Endlosschleife.
Die Eigenschaft ist schreibgeschützt; eine Zuweisung wird ignoriert (im Strict Mode ohne Fehler, da es ein Getter ohne Setter ist – im Strict Mode wirft sie TypeError).
Wird in allen modernen Browsern unterstützt; in Node.js nur über DOM-Implementierungen wie jsdom verfügbar.

Siehe auch

MutationRecord.type MutationRecord.oldValue MutationRecord.addedNodes MutationRecord.attributeName MutationRecord.nextSibling