【JS】MutationObserverの使い方を解説。DOMの変更を検知する!
- 投稿日:2024.07.13 最終更新日:2024.07.13
- Web API
![【JS】MutationObserverの使い方を解説。DOMの変更を検知する!](http://ugo.tokyo/wp-content/uploads/2024/07/mutation-observer-890x500.png)
この記事では、Web APIのひとつ「MutationObserver」について説明したい。
MutationObserverはHTML要素の構造や属性に変化があった際にそれを検知するための仕組み。Web APIのひとつとして定義されており、JavaScriptを使って使用することができる。
コンポーネントの外からHTML要素に変更を加えたいといったユースケースではよく使用される。
なお、モダンなウェブブラウザのほとんどがMutationObserverに対応している。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
MutationObserverの基本構文
まずはMutationObserverの基本的な構文と使用の流れを確認しよう。
// コンストラクタを使って新しいインスタンスを生成
const observer = new MutationObserver(callback);
// コールバック関数を記述
function callback(mutations: MutationRecord[], observer: MutationObserver) {
console.log();
}
// 監視対象のHTML要素を取得
const targetElement = document.getElementById('element-id') as HTMLElement;
// observeで監視を開始する
observer.observe(targetElement, { attributes: true });
// disconnectで監視を終了する
observer.disconnect();
- コンストラクタを使って新しいインスタンスを生成する。
- コールバック関数を記述する。
➡ mutationsを引数として使用できる。mutationsはMutationRecordの配列。 - MutationObserverで監視するHTML要素を取得する。
- observe関数で監視を開始する。
➡ この際に必ずオプションを指定する。 - disconnect関数で監視を終了する。
➡ マシンへの負荷を軽減するために必ず監視を終了する。
MutationRecordの種類
次にMutationRecordの種類について見ていこう。
observe関数を呼び出す際にオプションを指定するといったが、ここでは取得するMutationRecordの種類を指定する。
オプション名 | データタイプ | 説明 |
---|---|---|
childList | boolean | 子ノードの追加・削除を取得する。 |
attributes | boolean | ノードの属性の変更を取得する。 |
attributeOldValue | boolean | ノードの属性の変更前の値を取得する。 |
attributeFilter | string[] | 取得する属性をフィルタリングする際に取得する。 |
characterData | boolean | ノードのテキストを取得する。 |
characterDataOldValue | boolean | ノードの変更前のテキストを取得する。 |
subtree | boolean | 子ノードを含めたノード全体を監視の対象とする。 |
これらのオプションのうち「childList」「attributes」「characterData」の少なくともひとつを選択しなければならない。選択しなかった場合はエラーとなる。