MutationRecord: `attributeName`-Eigenschaft

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.

Die schreibgeschützte Eigenschaft attributeName des MutationRecord enthält den Namen eines geänderten Attributs, das zu einem Knoten gehört, der von einem MutationObserver beobachtet wird.

Wert

Wenn der type des Eintrags attributes ist, stellt dies einen String dar, der den Namen des mutierten Attributs des Mutationsziels darstellt.

Wenn der type des Eintrags nicht attributes ist, ist dies null.

Beispiele

Zuletzt aktualisierten Attributnamen erhalten

Im folgenden Beispiel gibt es vier Schaltflächen: zwei ändern das style-Attribut des h1-Elements, und zwei ändern das class-Attribut des h1-Elements. Das Skript verwendet einen MutationObserver, um die Änderungen zu erkennen und wird den untenstehenden Text mit dem Namen des letzten geänderten Attributs aktualisieren.

HTML

html
<h1 class="blue" 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 });

Ergebnis

Spezifikationen

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

Browser-Kompatibilität