MutationRecord: oldValue-Eigenschaft
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