MutationRecord: type プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
MutationRecord の読み取り専用プロパティ type は、MutationObserver によって観測された MutationRecord の種類です。
値
このプロパティは変更の種類を表す文字列に設定されます。以下のいずれかの値をとります。
-
attributes: 属性の変更の場合 -
characterData:CharacterDataノードの変更の場合 -
childList: ノードのツリーの変更の場合
例
変更の種類を記録する
以下の例では、DOM を操作する 2 個のボタンを用意します。最初のボタンは新しいノードを追加し、2 番目のボタンは追加されたノード全ての属性 color を変更します。それら全てを観測するための MutationObserver を作成し、変更の type を #log に記録するよう設定します。
ノードを追加した際の type は childList となり、属性 color を変更したときの type は attributes となることがわかるでしょう。
HTML
html
<button id="add-nodes">ノードを追加</button>
<button id="set-attribute">色を変える</button>
<button id="reset">リセット</button>
<pre id="log">変更の種類:</pre>
<div id="target"><p>ノード #0</p></div>
JavaScript
js
const addNodes = document.querySelector("#add-nodes");
const setAttribute = document.querySelector("#set-attribute");
const reset = document.querySelector("#reset");
const log = document.querySelector("#log");
const target = document.querySelector("#target");
let nodeNumber = 1;
addNodes.addEventListener("click", () => {
const newPara = document.createElement("p");
newPara.textContent = `ノード #${nodeNumber}`;
nodeNumber++;
target.appendChild(newPara);
});
setAttribute.addEventListener("click", () => {
if (target.getAttribute("class") === "red") {
target.setAttribute("class", "blue");
} else {
target.setAttribute("class", "red");
}
});
reset.addEventListener("click", () => self.location.reload());
function logMutationType(records) {
for (const record of records) {
log.textContent = `変更の種類: ${record.type}`;
}
}
const observer = new MutationObserver(logMutationType);
observer.observe(target, { childList: true, attributes: true, subtree: true });
結果
仕様書
| 仕様書 |
|---|
| DOM # ref-for-dom-mutationrecord-type② |