MutationRecord: attributeName property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

The MutationRecord read-only property attributeName contains the name of a changed attribute belonging to a node that is observed by a MutationObserver.

Value

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.

Examples

Get last updated attribute name

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

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

css
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

JavaScript

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

Result

Specifications

Specification
DOM
# ref-for-dom-mutationrecord-attributename②

Browser compatibility

Report problems with this compatibility data on GitHub
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
attributeName

Tip: you can click/tap on a cell for more information.

Full support