MutationRecord: oldValue-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die schreibgeschützte Eigenschaft oldValue des MutationRecord enthält die Zeichendaten oder Attributwerte eines beobachteten Knotens, bevor er geändert wurde.

Wert

Ein String, der den alten Wert eines Attributs darstellt, das geändert wurde, falls:

der Parameter attributeOldValue von MutationObserver.observe() true ist
der Parameter attributes von MutationObserver.observe() true ist oder weggelassen wird
der Mutation type attributes ist.

Ein String, der den alten Wert eines CharacterData-Knotens darstellt, der geändert wurde, falls:

der Parameter characterDataOldValue von MutationObserver.observe() true ist
der Parameter characterData von MutationObserver.observe() true ist oder weggelassen wird
der Mutation type characterData ist.

Andernfalls ist diese Eigenschaft null.

Im folgenden Beispiel gibt es einen Button, der die Farbe eines h1-Elements in eine zufällige neue Farbe ändert. Ein MutationObserver wird verwendet, um den Zielknoten (h1) auf Änderungen des Attributs zu beobachten. Wenn eine Änderung erkannt wird, ruft der Beobachter eine Funktion auf, die logOldValue().

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

html

<h1 id="h1">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,
});