MutationRecord: свойство attributeName

Базовая Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузера. Она доступна в браузерах с июля 2015 года.

Чтение-только свойство MutationRecord attributeName содержит имя изменённого атрибута, принадлежащего узлу, который наблюдается с помощью MutationObserver.

Значение

Если свойство type записи attributes, это строка, представляющая имя изменённого атрибута целевого объекта мутации.

Если свойство type записи не attributes, это null.

Примеры

Получение имени последнего обновлённого атрибута

В следующем примере есть четыре кнопки: две изменяют атрибут style элемента h1, и две изменяют атрибут class элемента h1. Сценарий использует MutationObserver для обнаружения изменений и будет обновлять текст ниже до имени последнего изменённого атрибута.

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

JavaScript

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

Результат

Спецификации

Спецификация
DOM # ref-for-dom-mutationrecord-attributename②

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`attributeName`	16	12	14	15	7	18	14	14	7	1.0	4.4

© 2005–2024 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