MutationRecord: attributeName プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
MutationRecord の読み取り専用プロパティ attributeName は、MutationObserver で観測されたノードの変更された属性の名前を保持します。
値
レコードの type が attributes である場合は、変更の対象の変更された属性の名前を表す文字列です。
レコードの type が attributes でない場合は、null です。
例
最後に更新された属性の名前を取得する
以下の例では、4 個のボタンがあります。2 個は h1 要素の属性 style を変更するもので、2 個は h1 要素の属性 class を変更するものです。このスクリプトは MutationObserver を用いて変更を検出し、下のテキストを最後に変更された属性の名前に更新します。
HTML
html
<h1 class="blue" id="hiMom">Hi, Mom!</h1>
<button id="redButton">class を "red" にする</button>
<button id="blueButton">class を "blue" にする</button>
<button id="whiteButton">style を "color:white;" にする</button>
<button id="blackButton">style を "color:black;" にする</button>
<p id="log">更新された属性の名前:</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 = `更新された属性の名前: ${record.attributeName}`;
}
}
}
const observer = new MutationObserver(logLastAttr);
observer.observe(hiMom, { attributes: true });
結果
仕様書
| 仕様書 |
|---|
| DOM # ref-for-dom-mutationrecord-attributename② |