Запись о мутации: свойство oldValue

Свойство MutationRecord только для чтения oldValue содержит данные символов или значение атрибута наблюдаемого узла до его изменения.

Строка, представляющая старое значение изменённого атрибута, если:

• параметр attributeOldValue для MutationObserver.observe() имеет значение true
• параметр attributes для MutationObserver.observe() имеет значение true или опущен
• тип мутации type равен attributes.

Строка, представляющая старое значение узла CharacterData, который был изменён, если:

• параметр characterDataOldValue для MutationObserver.observe() имеет значение true
• параметр characterData для MutationObserver.observe() имеет значение true или опущен
• тип мутации type равен characterData.

В противном случае это свойство null.

В следующем примере есть кнопка, которая изменяет цвет элемента h1 на случайный новый цвет. Используется MutationObserver для наблюдения за целевым узлом (h1) на изменения атрибута; при обнаружении изменения, наблюдатель вызывает функцию logOldValue().

Функция logOldValue() получает массив mutationRecords, содержащий объекты MutationRecord. Свойство oldValue объекта MutationRecord отображается затем в цвете старого значения.

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

Результат