MutationRecord：oldValue 属性

只读属性 MutationRecord oldValue 包含被观察节点更改之前的值。

值

如果以下条件满足，则此属性是一个表示已更改属性的旧值的字符串：

如果以下条件满足，则此属性是一个表示已更改 CharacterData 节点的旧值的字符串：

否则，此属性为 null。

示例

显示旧颜色值

在以下示例中，有一个按钮可以将 h1 的颜色更改为随机的新颜色。使用 MutationObserver 来观察目标节点 (h1) 的属性更改；当检测到更改时，观察者会调用一个函数 logOldValue()。

logOldValue() 函数会接收到包含 MutationRecord 对象的 mutationRecords 数组。然后，MutationRecord 对象的 oldValue 属性将以旧值的颜色的形式显示出来。

HTML

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

JavaScript

js
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,
});

结果

规范

规范
DOM 标准
# ref-for-dom-mutationrecord-oldvalue②

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。