MutationRecord: oldValue-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 oldValue
des MutationRecord
enthält die Zeichen- oder Attributdaten eines beobachteten Knotens, bevor sie geändert wurden.
Wert
Ein String, der den alten Wert eines Attributs darstellt, das geändert wurde, falls:
- der
attributeOldValue
-Parameter vonMutationObserver.observe()
true
ist - der
attributes
-Parameter vonMutationObserver.observe()
true
oder weggelassen ist - der Mutation
type
attributes
ist.
Ein String, der den alten Wert eines CharacterData
-Knotens darstellt, der geändert wurde, falls:
- der
characterDataOldValue
-Parameter vonMutationObserver.observe()
true
ist - der
characterData
-Parameter vonMutationObserver.observe()
true
oder weggelassen ist - der Mutation
type
characterData
ist.
Andernfalls ist diese Eigenschaft null
.
Beispiele
Alten Farbwert anzeigen
Im folgenden Beispiel gibt es einen Button, der die Farbe eines h1
auf eine zufällige neue Farbe ändert. Ein MutationObserver
wird verwendet, um den Zielknoten (h1
) auf Attributänderungen zu überwachen; wenn eine Änderung festgestellt wird, ruft der Beobachter eine Funktion logOldValue()
auf.
Die Funktion logOldValue()
wird mit dem Array mutationRecords
aufgerufen, das die MutationRecord
-Objekte enthält. Die oldValue
-Eigenschaft des MutationRecord
-Objekts wird dann in der Farbe des alten Wertes angezeigt.
HTML
<h1 id="h1" style="color: rgb(0 0 0);">Hi, Mom!</h1>
<button id="changeColorButton">Change color</button>
<p id="log"></p>
JavaScript
const h1 = document.getElementById("h1");
const changeValueButton = document.getElementById("changeColorButton");
const log = document.getElementById("log");
changeColorButton.addEventListener("click", () => {
// Random 6 character hexadecimal number to use as the hex color value
const newColor = Math.floor(Math.random() * 16777215).toString(16);
h1.style.color = `#${newColor}`;
});
function logOldValue(mutationRecordArray) {
for (const record of mutationRecordArray) {
log.textContent = `Old value: ${record.oldValue}`;
log.style.cssText = record.oldValue;
}
}
const observer = new MutationObserver(logOldValue);
observer.observe(h1, {
attributes: true,
attributeOldValue: true,
});
Ergebnis
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-oldvalue② |
Browser-Kompatibilität
BCD tables only load in the browser