【javascript】Mutation observerを使ってみる

動的な追加要素を検知していろんな処理ができる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()を再び呼び出すまでコールバック関数は実行されない

#使い方
以下はこちらのサイトで挙げられている使用例

• https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

// 対象とするノードを取得
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();

##解説
###対象とするノードを取得
監視したいノードを取得する
###オブザーバインスタンスを作成
ここで、変化した要素に何をするかを書く
###オブザーバの設定
ここで変化した要素の種類を指定する
###対象ノードとオブザーバの設定を渡す
ここで実際に実行