The MutationRecord
read-only property oldValue
contains the character data or attribute value of an observed node before it was changed.
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:
attributeOldValue
parameter to MutationObserver.observe()
is true
attributes
parameter to MutationObserver.observe()
is true
or omittedtype
is attributes
.A string representing the old value of a CharacterData
node that has been changed, if:
characterDataOldValue
parameter to MutationObserver.observe()
is true
characterData
parameter to MutationObserver.observe()
is true
or omittedtype
is characterData
.Otherwise this property is null
.
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.
html
<h1 id="h1" style="color:rgb(0, 0, 0);">Hi, Mom!</h1> <button id="changeColorButton">Change color</button> <p id="log"></p>
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, });
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-oldvalue② |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
oldValue |
16 | 12 | 14 | 11 | 15 | 7 | 4.4 | 18 | 14 | 14 | 7 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord/oldValue