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

DOM の変更を効果的に検出する

DOM の変更を観察することは、ユーザーの操作に応答する動的な Web アプリケーションを作成するために重要です。広く使用されているアプローチの 1 つは、DOM の変更を監視できる最新の API である MutationObserver を活用することです。このアプローチは、IE11、Firefox、WebKit などの最新のブラウザーでサポートされています。

これを実装するには、次の手順を使用できます。

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);
    }
  }
})();

この関数は要素 (obj) を受け取ります。 ) とコールバック関数 (callback) を引数として指定します。コールバックは、要素またはその子に変更が加えられるたびに実行されます。

使用法を示すために、次の例を検討してください。

<ol>
  <li><button>list item (click to delete)</button></li>
</ol>

<script>
  // add item
  var itemHTML = '<li><button>list item (click to delete)</button></li>';
  var listEl = document.querySelector('ol');

  // delete item
  listEl.onclick = function(e) {
    if (e.target.nodeName == 'BUTTON') {
      e.target.parentNode.parentNode.removeChild(e.target.parentNode);
    }
  };

  // Observe a specific DOM 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.clear();
    console.log('Added:', addedNodes, 'Removed:', removedNodes);
  });
</script>

この例では、次のことを示します。

• リストへの項目の追加
• リストからの項目の削除list
• MutationObserver を使用してリスト内の変更を検出します。これを使用して、UI の変更やバックエンド データの更新など、さまざまなアクションを実行できます。

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