JavaScript で DOM の変更を効率的に検出して対応するにはどうすればよいですか?

DOM の変更を検出する

DOM の変更を検出することは、リアルタイム イベントに応答する動的 Web アプリケーションを作成する場合に重要です。一般的なシナリオの 1 つは、DIV や入力などの要素がドキュメントに追加されたときに関数を実行することです。

MutationObserver を使用した解決策

DOM の変更を監視するための推奨されるアプローチは、 MutationObserver インターフェイス。これは、DOM 内の特定のノードへの変更を監視するための信頼性が高く効率的な方法を提供します。

var observeDOM = (function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function(obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    } else if (window.addEventListener) { // browser support fallback
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

// Example usage to observe a list element:
observeDOM(listEl, function(m) {
   var addedNodes = [], removedNodes = [];

   m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes));

   m.forEach(record => record.removedNodes.length & removedNodes.push(...record.removedNodes));

   console.log('Added:', addedNodes, 'Removed:', removedNodes);
});

この例では、observeDOM 関数はノード (この場合はリスト要素) とコールバック関数を受け取ります。 MutationObserver インターフェイスを使用して、リスト要素の子ノードの変更を監視します。変更が発生すると、追加および削除されたノードに関する情報を使用してコールバック関数が実行されます。

代替アプローチ

ターゲット ブラウザで MutationObserver がサポートされていない場合は、フォールバックします。オプション以下が含まれます:

• DOMNodeInserted および DOMNodeRemoved イベント。これらは、監視されている要素に直接アタッチできます。
• setInterval 変更を定期的にチェックする機能ですが、これは少ないです効率的です。

以上がJavaScript で DOM の変更を効率的に検出して対応するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。