The MutationRecord
read-only property attributeName
contains the name of a changed attribute belonging to a node that is observed by a MutationObserver
.
The MutationRecord
read-only property attributeName
contains the name of a changed attribute belonging to a node that is observed by a MutationObserver
.
If the record's type
is attributes
, this is a string representing the name of the mutated attribute of the mutation target.
If the record's type
is not attributes
, this is null
.
In the following example, there are four buttons: two change the style
attribute of the h1
element, and two change the class
attribute of the h1
element. The script uses a MutationObserver
to detect the changes and will update the text below to the name of the last attribute that was changed.
html
<h1 class="blue" style="color:black;" id="hiMom">Hi, Mom!</h1> <button id="redButton">Set class to "red"</button> <button id="blueButton">Set class to "blue"</button> <button id="whiteButton">Set style to "color:white;"</button> <button id="blackButton">Set style to "color:black;"</button> <p id="log">Updated attribute name:</p>
css
.red { background-color: red; } .blue { background-color: blue; }
js
const hiMom = document.querySelector("#hiMom"); const redButton = document.querySelector("#redButton"); const blueButton = document.querySelector("#blueButton "); const whiteButton = document.querySelector("#whiteButton"); const blackButton = document.querySelector("#blackButton"); const log = document.querySelector("#log"); redButton.addEventListener("click", () => { hiMom.classList.add("red"); hiMom.classList.remove("blue"); }); blueButton.addEventListener("click", () => { hiMom.classList.add("blue"); hiMom.classList.remove("red"); }); whiteButton.addEventListener("click", () => { hiMom.style.color = "white"; }); blackButton.addEventListener("click", () => { hiMom.style.color = "black"; }); function logLastAttr(mutationRecordArray) { for (const record of mutationRecordArray) { if (record.type === "attributes") { log.textContent = `Updated attribute name: ${record.attributeName}`; } } } const observer = new MutationObserver(logLastAttr); observer.observe(hiMom, { attributes: true });
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-attributename② |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
attributeName |
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/attributeName