MutationRecord: Eigenschaft attributeName
Die schreibgeschützte Eigenschaft attributeName
des MutationRecord
enthält den Namen eines geänderten Attributs eines Knotens, der von einem MutationObserver
beobachtet wird.
Wert
Beispiele
Namen des zuletzt aktualisierten Attributs abrufen
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
zur Erkennung der Änderungen und aktualisiert den darunter liegenden Text mit dem Namen des zuletzt geänderten Attributs.
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 });
Ergebnis
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-attributename② |
Browser-Kompatibilität
BCD tables only load in the browser