DOM での要素の追加を検出する方法: 非推奨と代替?

DOM での要素の追加の監視

要素が Web ページに追加されたときに通知を受け取るには、いくつかの方法が利用可能です。

非推奨の変更イベント:

以前は、変更イベント (DOMNodeInserted など) を使用して DOM の変更を監視できました。ただし、これらのイベントは現在非推奨になっています。

継続ポーリング:

古いアプローチには、setInterval() を使用して目的の要素の存在を定期的にチェックすることが含まれます:

<code class="js">function checkDOMChange() {
  // Check for element presence...

  // Continue polling after 100 milliseconds
  setTimeout(checkDOMChange, 100);
}</code>

これは、大量の CPU リソースを消費する非効率的なソリューションです。

推奨: MutationObserver

最新のブラウザは、ミューテーションの代替手段となる MutationObserver をサポートしています。イベント。これにより、DOM の変更を監視し、要素が追加されたときにコールバック関数を実行できます。

<code class="js">const observer = new MutationObserver(mutations => {
  // Process DOM changes...
});

observer.observe(document.documentElement, { childList: true });</code>

MutationObserver を実装すると、非推奨の変更イベントの制限や連続ポーリングの非効率性なしに、DOM の追加を効果的に監視できます。 .

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