DOM（要素）の変化を検知するMutationObserverが結構使える

2024年10月1日2024年10月27日

JavaScriptを使っていると、遅延読み込みされた要素にアクセスできず、動的な処理が思うようにいかないことがあります。

しかし、MutationObserverを使用することで、DOMの変更をリアルタイムで監視し、変更が発生した際に自動的に処理を実行することができます。

これにより、遅延読み込みされた要素にも柔軟に対応できるようになるのです。

JavaScriptでテキストを変更してみる

通常、JavaScriptでテキストを変更したいとき以下のようなコードを使用します。

document.addEventListener('DOMContentLoaded', function() {

  // お知らせバーの変更
  const infoBarText = document.querySelector('.c-infoBar__text');
  if (infoBarText) {
    infoBarText.textContent = '任意のテキスト';
  }

});

しかし、遅延読み込みしている要素は、JavaScriptの実行時点でまだ生成されていないことがあり、うまく処理できません。

そこでDOMの変化を検知するMutationObserverの登場です。

遅延読み込みされた要素のテキストを変更してみる

footerを遅延読み込みしている想定で、コピーライトを変更してみます。

// 監視対象
const footer = document.querySelector(".l-footer");

// DOMに変更があったときに実行されるコールバック関数
const observer = new MutationObserver(function (mutations) {
  for (const mutation of mutations) {
    const copyright = document.querySelector(".copyright");

    if (copyright) {
      copyright.innerHTML = '<span lang="en">©</span> 任意のコピーライト';
      observer.disconnect(); // 要素が見つかったら監視を停止
    }
  }
});

// 監視対象を監視
observer.observe(footer, {
  childList: true, // 子要素の追加や削除を監視
  subtree: true,   // 監視対象の要素内の全ての子孫要素も監視
});

実行されない場合は、監視対象をbodyにするなど、DOMを検知する範囲を広げてみるとうまくいきます。

// DOMに変更があったときに実行されるコールバック関数
const observer = new MutationObserver(function (mutations) {
  for (const mutation of mutations) {
    // 実行したい処理を記述
  }
});

// 監視対象を監視
observer.observe(document.body, {
  childList: true, // 子要素の追加や削除を監視
  subtree: true,   // 監視対象の要素内の全ての子孫要素も監視
});

ただし、監視する対象が広範囲になると、頻繁にDOMが変更される場合などに処理が多くなるため、特定の要素を指定してあげた方がパフォーマンスは高いです。

MutationObserverの基本的な使い方

// 1. 監視対象の要素を取得
const targetNode = document.querySelector('.target-element');

// 2. 変更を検知したときに実行されるコールバック関数を定義
const callback = function(mutationsList, observer) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('子要素が変更されました。');
        } else if (mutation.type === 'attributes') {
            console.log('属性が変更されました。');
        }
    }
};

// 3. MutationObserverのインスタンスを作成
const observer = new MutationObserver(callback);

// 4. 監視オプションを設定
const config = {
    attributes: true,   // 属性の変更を監視
    childList: true,    // 子要素の追加・削除を監視
    subtree: true       // 子孫要素の変更も監視
};

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

// 6. 監視を停止したいとき（必要に応じて呼び出す）
observer.disconnect();

MutationObserver – Web API | MDN

DOM（要素）の変化を検知するMutationObserverが結構使える

JavaScriptでテキストを変更してみる

遅延読み込みされた要素のテキストを変更してみる

MutationObserverの基本的な使い方

おすすめWEBスクール

お気軽にコメントどうぞ

コメントするコメントをキャンセル

DOM（要素）の変化を検知するMutationObserverが結構使える

JavaScriptでテキストを変更してみる

遅延読み込みされた要素のテキストを変更してみる

MutationObserverの基本的な使い方

おすすめWEBスクール

お気軽にコメントどうぞ

コメントする コメントをキャンセル

コメントするコメントをキャンセル