The MutationRecord read-only property oldValue contains the character data or attribute value of an observed node before it was changed.


A string representing the old value of an attribute which has been changed, if:

A string representing the old value of a CharacterData node that has been changed, if:

Otherwise this property is null.


Show old color value

In the following example, there is a button that changes the color of an h1 to a random new color. A MutationObserver is used to observe the target node (h1) for changes to the attribute; when a change is detected, the observer calls a function, logOldValue().

The logOldValue() function is passed the mutationRecords array, which contains the MutationRecord objects. The oldValue property of the MutationRecord object is then displayed, in the color of the old value.


<h1 id="h1" style="color:rgb(0, 0, 0);">Hi, Mom!</h1>
<button id="changeColorButton">Change color</button>
<p id="log"></p>


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); = `#${newColor}`;

function logOldValue(mutationRecordArray) {
  for (const record of mutationRecordArray) {
    log.textContent = `Old value: ${record.oldValue}`; = record.oldValue;

const observer = new MutationObserver(logOldValue);
observer.observe(h1, {
  attributes: true,
  attributeOldValue: true,



DOM Standard
# ref-for-dom-mutationrecord-oldvalue②

Browser compatibility

BCD tables only load in the browser