サンプルコード：MutationObserver を使って子要素の追加・削除を監視する

2024-04-02

JavaScript / jQuery で DOM 変更を監視する方法

JavaScript や jQuery を使用して、DOM (Document Object Model) の変更を監視するには、いくつかの方法があります。それぞれ異なる利点と欠点があり、状況に応じて最適な方法を選択する必要があります。

主な方法

MutationObserver

MutationObserver は、DOM の変更を監視するための最新の標準 API です。非常に効率的で、パフォーマンスに影響を与えにくいです。ただし、ブラウザのサポート状況はまだ完全ではありません。

イベントリスナー

特定の要素に対する変更を監視したい場合は、イベントリスナーを使用できます。例えば、click イベントリスナーは、要素がクリックされたときに実行されます。ただし、多くのイベントを監視する場合は、コードが煩雑になる可能性があります。

jQuery イベント

jQuery には、DOM 変更を監視するためのイベントがいくつか用意されています。例えば、change イベントは、要素の値が変更されたときに発生します。イベントリスナーよりも簡潔なコードで記述できます。

具体的な例

const observer = new MutationObserver(mutations => {
  // ここに変更処理を記述
});

observer.observe(document.body, {
  subtree: true,
  childList: true,
  attributes: true
});

イベントリスナーを使用する場合

document.body.addEventListener('change', (event) => {
  // ここに変更処理を記述
});

$(document.body).on('change', (event) => {
  // ここに変更処理を記述
});

補足

Google Chrome 拡張機能で DOM 変更を監視する場合、content scripts で上記のコードを実行できます。
どの方法を使用する場合でも、メモリリークを防ぐために、イベントリスナーや MutationObserver を適切に解除する必要があります。

具体的な状況に合わせて、最適な方法を選択する必要があります。

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

const observer = new MutationObserver(mutations => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      for (const addedNode of mutation.addedNodes) {
        console.log('子要素が追加されました:', addedNode);
      }
      for (const removedNode of mutation.removedNodes) {
        console.log('子要素が削除されました:', removedNode);
      }
    }
  }
});

observer.observe(target, {
  childList: true
});

// 例: 子要素を追加
const newDiv = document.createElement('div');
newDiv.textContent = '新しい子要素';
target.appendChild(newDiv);

// 例: 子要素を削除
target.removeChild(target.firstChild);

このコードを実行すると、#target 要素の子要素が追加または削除されたときに、コンソールにメッセージが表示されます。

document.getElementById('target').addEventListener('change', (event) => {
  console.log('要素が変更されました:', event.target);
});

$(document.getElementById('target')).on('change', (event) => {
  console.log('要素が変更されました:', event.target);
});

DOM 変更を監視するその他の方法

setInterval を使用して、定期的に DOM をチェックする方法です。以下のコードは、1秒ごとに #target 要素の内容をチェックし、変更があればコンソールにメッセージを表示します。

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

setInterval(() => {
  const content = target.textContent;
  if (content !== previousContent) {
    console.log('要素の内容が変更されました:', content);
    previousContent = content;
  }
}, 1000);

ポーリング

特定の要素の変更を監視したい場合は、ポーリングを使用できます。ポーリングは、setInterval と似ていますが、特定の要素に焦点を当てている点が異なります。以下のコードは、#target 要素の value プロパティが変更されたときにコンソールにメッセージを表示します。

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

const poll = () => {
  const value = target.value;
  if (value !== previousValue) {
    console.log('要素の値が変更されました:', value);
    previousValue = value;
  }
  requestAnimationFrame(poll);
};

poll();

Mutation Events は、DOM の変更を監視するための古い API です。 MutationObserver よりもサポートされているブラウザが少ないですが、コードがより簡潔になる場合があります。以下のコードは、#target 要素の子要素が追加されたときにコンソールにメッセージを表示します。

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

target.addEventListener('DOMNodeInserted', (event) => {
  console.log('子要素が追加されました:', event.target);
});

注意点