MutationEvent.prevValue — Eigenschaft · JavaScript-Referenz

Signatur

MutationEvent.prevValue

Beschreibung

Die schreibgeschützte Eigenschaft prevValue der veralteten Schnittstelle MutationEvent enthält den Wert, den ein Knoten vor der Änderung hatte. Zusammen mit newValue sieht man daran, was sich geändert hat.

Welchen Inhalt sie hat, hängt vom Ereignistyp ab:

DOMAttrModified: der vorherige Wert des geänderten Attributs. Ist attrChange gleich MutationEvent.ADDITION, ist der String leer, weil das Attribut vorher noch nicht existierte.
DOMCharacterDataModified: der vorherige Inhalt eines Text-, Comment- oder CDATASection-Knotens.
Bei allen anderen Mutation-Events (z. B. DOMNodeInserted) ist der Wert ein leerer String.

Mutation-Events gelten als veraltet: Sie werden synchron bei jeder einzelnen Änderung ausgelöst und verlangsamen DOM-Operationen stark. In neuem Code solltest du stattdessen einen MutationObserver mit der Option attributeOldValue: true bzw. characterDataOldValue: true verwenden. Den alten Wert findest du dann in MutationRecord.oldValue.

Rückgabewert

Typ

string

Beschreibung

Der vorherige Attribut- bzw. Textwert. Ein leerer String, wenn es keinen vorherigen Wert gibt oder der Ereignistyp keinen Wert liefert.

Beispiele

Alten Attributwert mit DOMAttrModified auslesen (nur zur Veranschaulichung)

const box = document.createElement('div');
box.className = 'alt';
document.body.append(box);

const onAttr = (event) => {
  // Funktioniert nur in Browsern, die Mutation-Events noch unterstützen
  console.log(`${event.attrName}: "${event.prevValue}" → "${event.newValue}"`);
};

box.addEventListener('DOMAttrModified', onAttr);
box.className = 'neu';

// Listener wieder entfernen
box.removeEventListener('DOMAttrModified', onAttr);

class: "alt" → "neu"

Vorherigen Textinhalt mit DOMCharacterDataModified protokollieren

const p = document.createElement('p');
p.textContent = 'Hallo';
document.body.append(p);
const textNode = p.firstChild;

p.addEventListener('DOMCharacterDataModified', (event) => {
  console.log('Vorher:', event.prevValue, '| Nachher:', event.newValue);
});

textNode.data = 'Hallo Welt';

Vorher: Hallo | Nachher: Hallo Welt

Moderner Ersatz: MutationObserver mit oldValue

const box = document.createElement('div');
box.dataset.status = 'offen';
document.body.append(box);

const observer = new MutationObserver((records) => {
  for (const record of records) {
    const neu = record.target.getAttribute(record.attributeName);
    console.log(`${record.attributeName}: "${record.oldValue}" → "${neu}"`);
  }
});

observer.observe(box, {
  attributes: true,
  attributeOldValue: true // entspricht prevValue
});

box.dataset.status = 'erledigt';
// Hinweis: Der Callback läuft asynchron (Microtask)

data-status: "offen" → "erledigt"

// Wichtig · Fallstricke

Veraltet: Chrome und Edge haben Mutation-Events ab Version 127 (2024) entfernt. Firefox und Safari unterstützen sie teilweise noch, das Entfernen ist aber angekündigt. Verlass dich in Produktivcode nicht darauf.
Leistung: Mutation-Events werden synchron bei jeder Änderung ausgelöst. Sobald ein Listener registriert ist, kann das DOM-Manipulationen spürbar verlangsamen.
Wird ein Attribut neu hinzugefügt (attrChange === MutationEvent.ADDITION), ist prevValue ein leerer String. Wird es entfernt (REMOVAL), ist newValue leer. Ein leerer prevValue lässt sich also nicht von einem Attribut unterscheiden, das vorher leer war. Prüfe deshalb zusätzlich attrChange.
Der Ersatz ist MutationObserver: Hier musst du attributeOldValue bzw. characterDataOldValue ausdrücklich aktivieren, sonst ist oldValue gleich null.

Siehe auch

MutationEvent MutationEvent.newValue MutationEvent.attrChange MutationEvent.attrName MutationObserver MutationRecord.oldValue ElementInternals.ariaValueNow