JavaScript 監視 イベント

JavaScript 監視イベント: MutationObserver で DOM 変更を検知する方法

JavaScript で動的な Web ページを扱う際、DOM の変更を監視し、それに応じて処理を実行したい場合があります。本記事では、`MutationObserver` API を使用して、DOM の変更を効率的に監視する方法について解説します。

副題

1. MutationObserver とは？

  • `MutationObserver` は、DOM ツリーの変更を監視する API です。
  • 変更が発生すると、事前に設定したコールバック関数が実行されます。
  • 従来の `Mutation Events` よりもパフォーマンスに優れているため、現在では `MutationObserver` の使用が推奨されています。

2. MutationObserver の使い方

  1. `MutationObserver` オブジェクトを作成し、コールバック関数を設定します。
  2. `observe()` メソッドで、監視対象の DOM ノードと監視オプションを指定します。
  3. `disconnect()` メソッドで監視を停止します。

// MutationObserver オブジェクトを作成
const observer = new MutationObserver(callback);

// 監視オプション
const config = { 
    childList: true, 
    attributes: true, 
    ... 
};

// 監視を開始
observer.observe(targetNode, config);

// 監視を停止
observer.disconnect();

3. 監視オプション

オプション 説明
`childList` 子ノードの追加または削除を監視します。
`attributes` 属性の変更を監視します。
`characterData` テキストコンテンツの変更を監視します。
`subtree` 監視対象ノードの子孫ノードも監視します。
`attributeOldValue` `attributes` オプションが true の場合、変更前の属性値も記録します。
`characterDataOldValue` `characterData` オプションが true の場合、変更前のテキストコンテンツも記録します。

4. コールバック関数と MutationRecord

  • コールバック関数は、DOM の変更が発生するたびに実行されます。
  • コールバック関数には、`MutationRecord` オブジェクトの配列が渡されます。
  • `MutationRecord` オブジェクトには、変更の種類、変更されたノード、変更前後の値などの情報が含まれています。

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    switch (mutation.type) {
      case 'childList':
        // 子ノードの追加または削除
        console.log('子ノードが変更されました:', mutation);
        break;
      case 'attributes':
        // 属性の変更
        console.log('属性が変更されました:', mutation);
        break;
      case 'characterData':
        // テキストコンテンツの変更
        console.log('テキストコンテンツが変更されました:', mutation);
        break;
    }
  }
};

5. MutationObserver のユースケース

  • 動的にコンテンツが更新される Web ページでの処理
    • 無限スクロールの実装
    • リアルタイムチャットの更新
    • 動的に生成される広告の監視
  • フォームの入力値検証
  • DOM の変更に基づいたアニメーションの実装

6. 注意点

  • `MutationObserver` は、すべてのブラウザでサポートされているわけではありません。 (Can I use... MutationObserver を参照)
  • パフォーマンスへの影響を考慮し、監視対象とオプションを適切に設定することが重要です。

7. まとめ

  • `MutationObserver` は、DOM の変更を監視するための強力な API です。
  • 動的な Web ページを開発する際には、`MutationObserver` を使用することで、より効率的でインタラクティブなユーザーエクスペリエンスを提供できます。

関連文献

QA

Q1: MutationObserver は、Mutation Events と比べてどのような利点がありますか？

A1: MutationObserver は、Mutation Events よりもパフォーマンスに優れており、非同期に処理されるため、ページのレンダリングをブロックしません。

Q2: 監視対象のノードが削除された場合、MutationObserver はどのように動作しますか？

A2: 監視対象のノードが削除された場合、MutationObserver はそのノードの削除を検知し、コールバック関数を一度だけ実行します。その後、MutationObserver は自動的に切断されます。

Q3: MutationObserver を使用する際に、パフォーマンスに注意すべき点はありますか？

A3: はい、MutationObserver は、監視対象のノードや監視オプションによっては、パフォーマンスに影響を与える可能性があります。監視対象をできるだけ絞り込み、必要なオプションだけを設定することで、パフォーマンスへの影響を最小限に抑えることができます。

その他の参考記事:jquery observer