MutationObserver | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`MutationObserver`	26	12	14	7	26	7
`disconnect` MutationObserver の disconnect() メソッドは、オブザーバーに変更の監視を停止させます。	18	12	14	6	18	6
`MutationObserver` DOM の MutationObserver() コンストラクターは、MutationObserver インターフェイスの一部で、指定されたコールバックを DOM イベントが発生したときに実行するオブザーバーを作成して返します。	26	12	14	7	26	7
`observe` MutationObserver の observe() メソッドは、MutationObserver コールバックを設定し、与えられたオプションに適合する DOM への変更の通知の受信を開始します。	18	12	14	6	18	6
`takeRecords` MutationObserver の takeRecords() メソッドは、検出されたがオブザーバーのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。	20	12	14	6	25	6
`MutationRecord` MutationRecord は、 DOM に生じた個々の変更を表します。これは MutationObserver のコールバック関数に渡されるオブジェクトです。	16	12	14	7	18	7
`addedNodes` MutationRecord の読み取り専用プロパティ `addedNodes` は、MutationObserver によって検出されたミューテーションによってターゲットノードに追加されたノードの NodeList です。	16	12	14	7	18	7
`attributeName` MutationRecord の読み取り専用プロパティ attributeName には、MutationObserver によって監視されているノードに属する、変更された属性の名前が含まれます。	16	12	14	7	18	7
`attributeNamespace` MutationRecord の読み取り専用プロパティ `attributeNamespace` は、MutationObserver によって監視されている MutationRecord 内の、変更された属性の名前空間です。	16	12	14	7	18	7
`nextSibling` MutationRecord の読み取り専用プロパティ `nextSibling` は、MutationObserver のターゲットに対して追加または削除された子ノードの、その直後の兄弟ノードを指します。	16	12	14	7	18	7
`oldValue` MutationRecord の読み取り専用プロパティ oldValue には、変更される前のオブザーブされたノードの文字データまたは属性値が含まれます。	16	12	14	7	18	7
`previousSibling` MutationRecord の読み取り専用プロパティ `previousSibling` は、MutationObserver のターゲットに対して追加または削除された子ノードの、直前の兄弟ノードを指します。	16	12	14	7	18	7
`removedNodes` MutationRecord の読み取り専用プロパティ `removedNodes` は、MutationObserver によって検出された変更により、対象ノードから削除されたノードの NodeList です。	16	12	14	7	18	7
`target` MutationRecord の読み取り専用プロパティ target は、MutationObserver によって検出された変更（mutation）の対象（つまり、変更されたノード）です。	16	12	14	7	18	7
`type` MutationRecord の読み取り専用プロパティの型は、MutationObserver によって監視される MutationRecord の型です。	16	12	14	7	18	7

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

実務での使いどころ

MutationObserver の活用

MutationObserver インターフェイスは、 DOM ツリーへ変更が加えられたことを監視することができる機能を提供します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

MutationObserver の活用

注意点

実装メモ

参考リンク