動的な追加要素を検知していろんな処理ができるMutation observerについてまとめる。
これがあれば快適なネットサーフィンがで着ると思う。
例えばgifばかりの動画はブラウザが重くなるので、ファイルがgifならimgタグごと消してしまうことで軽くなる
そういうことができるMutation observerについて軽くまとめてみる
Mutation observer
MutationObserver とは、指定したコールバック関数を DOM の変更時に実行させる API です。この API は、DOM3 Events の仕様で定義されていた Mutation Events を新しく設計し直したものです。
出典：https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
つまりは監視。
追加/削除された要素をいじれる
インスタンス
MutationObserver(
function callback
);
callbackの第1引数にMutationRecord
第2引数にMutationObserver インスタンス自身を受け取る
監視の開始 observe
void observe(
Node target,
MutationObserverInit options
);
| 引数 | 説明 |
|---|---|
| target | DOM変更を検したいNode |
| options | 取得したい変更の種類を指定 |
optionに指定できるもの
| プロパティ | 説明 |
|---|---|
| childList | 対象ノードの子ノードでの追加・削除を監視 |
| attributes | 対象ノードの属性変更の監視 |
| characterData | 対象ノードのデータ監視 |
| subtree | 対象ノードとその子孫ノードの監視 |
| attributeOldValue | 対象ノードの変更前の属性値を記録 |
| characterDataOldValue | 対象ノードの変更前のデータを記録 |
これらのオプションをオブジェクトで渡す。
MutationRecordオブジェクト
オプションを説明したところで、MutationRecordが持つプロパティについて説明する。
オブザーバーのインスタンス時に書くが、変化があるとこのコールバック関数に渡される。
| プロパティ | 説明 |
|---|---|
| type | 変化の種類。childList,attributes,charactorDataか |
| target | 変化したノード |
| addedNodes | 追加されたノード |
| remocedNodes | 消されたノード |
| previousSibling/nextSibling | 追加/削除されたノードの前後にあるノード |
監視の停止 disconnect()
observe()を再び呼び出すまでコールバック関数は実行されない
使い方
以下はこちらのサイトで挙げられている使用例
// 対象とするノードを取得
const target = document.getElementById('some-id');
// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log(mutation.type);
});
});
// オブザーバの設定
const config = { attributes: true, childList: true, characterData: true };
// 対象ノードとオブザーバの設定を渡す
observer.observe(target, config);
// 後ほど、監視を中止
observer.disconnect();
解説
対象とするノードを取得
監視したいノードを取得する
オブザーバインスタンスを作成
ここで、変化した要素に何をするかを書く
オブザーバの設定
ここで変化した要素の種類を指定する
対象ノードとオブザーバの設定を渡す
ここで実際に実行