Signatur
Beschreibung
MutationEvent.newValue ist eine schreibgeschützte Eigenschaft des veralteten Interfaces MutationEvent. Sie liefert den Wert nach einer DOM-Änderung als String. Das Gegenstück ist MutationEvent.prevValue, das den Wert vor der Änderung enthält.
Belegt wird die Eigenschaft nur bei diesen Ereignistypen:
DOMAttrModified: der neue Attributwert. BeiattrChange === MutationEvent.REMOVAList er leer.DOMCharacterDataModified: der neue Inhalt einesText-,Comment- oderCDATASection-Knotens.
Bei allen anderen Mutation-Events (z. B. DOMNodeInserted oder DOMSubtreeModified) ist newValue ein leerer String.
Mutation-Events sind seit Langem veraltet. Sie werden synchron bei jeder einzelnen Änderung ausgelöst und bremsen DOM-Operationen stark aus. Für neuen Code solltest du immer MutationObserver verwenden. Dort liest du den neuen Wert direkt am Zielknoten aus, z. B. mit target.getAttribute(name) oder target.data.
Rückgabewert
"").Beispiele
Textänderung mit DOMCharacterDataModified erkennen
const textNode = document.createTextNode('Hallo');
document.body.append(textNode);
const onTextChange = (event) => {
console.log(`Alt: "${event.prevValue}", Neu: "${event.newValue}"`);
};
// Veraltet – funktioniert nur in Browsern, die Mutation-Events noch unterstützen
textNode.addEventListener('DOMCharacterDataModified', onTextChange);
textNode.data = 'Hallo Welt';Attributänderung überwachen und Listener wieder entfernen
const box = document.createElement('div');
document.body.append(box);
const onAttrChange = (event) => {
if (event.attrName === 'data-status') {
console.log(`Status: ${event.prevValue || '(leer)'} → ${event.newValue || '(entfernt)'}`);
}
};
// DOMAttrModified gab es historisch vor allem in Firefox und IE
box.addEventListener('DOMAttrModified', onAttrChange);
box.setAttribute('data-status', 'aktiv');
// Listener aufräumen
box.removeEventListener('DOMAttrModified', onAttrChange);
box.setAttribute('data-status', 'inaktiv'); // keine Ausgabe mehrModerner Ersatz mit MutationObserver
const box = document.createElement('div');
document.body.append(box);
const observer = new MutationObserver((records) => {
for (const record of records) {
// Den neuen Wert direkt am Zielknoten auslesen
const newValue = record.target.getAttribute(record.attributeName);
console.log(`${record.attributeName}: ${record.oldValue} → ${newValue}`);
}
});
observer.observe(box, { attributes: true, attributeOldValue: true });
box.setAttribute('data-status', 'aktiv');
box.setAttribute('data-status', 'fertig');// Wichtig · Fallstricke
Veraltet: Die Mutation-Events stehen nicht mehr im DOM-Standard.
- Chrome und Edge haben sie ab Version 127 standardmäßig entfernt.
- In anderen Browsern ist die Unterstützung uneinheitlich.
DOMAttrModifiedwar z. B. in Chrome und Safari nie verfügbar. - Wenn du auf die Events angewiesen bist, prüfe die aktuelle Unterstützung (etwa auf MDN oder caniuse). In Produktionscode solltest du dich nicht darauf verlassen.
Performance: Mutation-Events werden synchron und bei jeder einzelnen Änderung ausgelöst. Dadurch können sie DOM-Manipulationen um ein Vielfaches verlangsamen. MutationObserver fasst Änderungen dagegen gebündelt und asynchron (als Microtask) zusammen.
Randfall: Nicht jeder leere String bei newValue bedeutet einen leeren Wert. Wenn ein Attribut entfernt wird, ist newValue ebenfalls leer. Unterscheide diese Fälle deshalb über attrChange (MODIFICATION, ADDITION, REMOVAL).