【JavaScript】MutationObserverの使い方を解説。コピペOK！

本記事の目次

MutationObserverとは
MutationObserverの使い方
基本構文サンプル（コピペOK!）
対応ブラウザ

MutationObserverとは

MutationObserverとは、任意の要素（DOM）を監視することができるWebAPIです。

Mutation（ミューテーション）は「変化」を、Observer（オブザーバー）は「監視者」意味する言葉で、名前通りそのままですね。

JavaScriptで動的に追加した要素を取得して、さらに処理を追加したいといった時にMutationObserverを使って要素を監視しておけば簡単に処理を行うことができます。

MutationObserverの使い方

基本的な使い方は以下の通りになります。

①監視対象とする要素を取得する

まずは監視対象とする要素を取得します。

＜例1：id=”target”の要素を監視する＞

const target = document.getElementById('target');

＜例2：body全体を監視する＞

const target = document.body;

②インスタンスを生成し、処理を記述する

インスタンスを生成？、、、なんて方も安心してください。

下記のコードをコピーし、該当箇所に行いたい処理を記述するだけで実装できます。

const mutationObserver = new MutationObserver(() => {  
  // ▼ここに処理を記述▼
  console.log('処理を行います');
  // ▲ここに処理を記述▲
 });

③オプションの設定を行う

オプションを設定し、どの範囲まで監視するかを決めます。

const options = {
    childList: true, 　　// 子要素の変化を監視する
    characterData: true,　 　　// テキストの変化を監視する
    characterDataOldValue: true,　　　// 属性の変化前を記録する
    attributes: true,　 　　// 属性の変化を監視する
    subtree: true, 　　// 子孫要素の変化を監視
}

このうち、childList、attributes、characterDataのいずれか１つにtrueが必須となりますのでご注意ください。

④監視を開始する

監視対象の要素とオプション設定を渡して、監視を開始します。

mutationObserver.observe(target, options);

基本構文サンプル（コピペOK!）

以下のコードをコピペし、必要に応じてカスタマイズしてください。

const mutationObserver = new MutationObserver(() => {  
  // ▼ここに処理を記述▼
  console.log('処理を行います');
  // ▲ここに処理を記述▲
 });
 
 mutationObserver.observe(document.body, { childList: true });