MutationObserver を使用して DOM 要素の追加を検出する方法

DOM での要素の追加の観察

DOM 要素が Web ページに追加されるたびに関数をトリガーするメカニズムを求めます。ブラウザ拡張機能を開発していて、Web ページのソース コードにアクセスできない場合、これを実現するための潜在的なアプローチについて疑問に思います。

setInterval() を使用して DOM をポーリングすることを検討していますが、このアプローチは最適ではなく、計算上最適ではありません。非効率的です。幸いなことに、より良い代替手段が利用可能です。

ブラウザの以前のバージョンでは、DOM の変更を検出するために突然変異イベントを使用できました。ただし、これらのイベントはその後非推奨になりました。したがって、推奨される解決策には、MutationObserver を活用することが含まれます。

MutationObserver は、DOM 内の変更を監視する効果的かつ効率的な方法を提供します。要素の追加や削除など、特定の変異を監視するためのシンプルかつ強力な API を提供します。ポーリングとは異なり、MutationObserver は継続的な DOM スキャンを必要としないため、計算オーバーヘッドが削減されます。

MutationObserver を使用するには、次のような関数を実装できます。

<code class="javascript">function checkDOMChange() {
  // Define the type of mutation you're interested in (e.g., element addition)
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      // Handle element addition here
    });
  });

  // Select the target element you wish to monitor
  var target = document.querySelector('body');

  // Start observing the target element for specific mutations
  observer.observe(target, { childList: true });

  // Optionally, you can terminate the observer when no longer needed
  // observer.disconnect();
}</code>

MutationObserver を実装することで、次のことができます。要素の追加を効率的に監視し、それに応じて必要な機能をトリガーします。このアプローチにより、継続的な DOM ポーリングの必要がなくなり、パフォーマンスとユーザー エクスペリエンスが向上します。

以上がMutationObserver を使用して DOM 要素の追加を検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。