DOM に追加された要素を検出して対応するにはどうすればよいですか?

追加された要素の DOM 変更の検出

はじめに

ドキュメント オブジェクト モデル (DOM) の変更に対応するために、開発者は多くの場合、関数を実行する必要があります。要素が HTML に追加されるとき。この記事では、MutationObserver を使用したソリューションを提供し、最新のブラウザで動作する高度なアプローチとレガシー ブラウザのフォールバック メソッドの両方を提供します。

高度なアプローチ: MutationObserver

MutationObserver は、次のことを可能にする API です。 DOM 内の特定の変更を観察し、それに対応します。追加された要素を検出するには、observerDOM(obj, callback) が使用されます。obj はターゲット要素、callback は変更時に実行される関数です。コード スニペットは次のとおりです。

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

  return function(obj, callback) {
    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    }
    // Fallback for legacy browsers
    else if (window.addEventListener) {
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

observedDOM を利用するには、監視する DOM 要素と、MutationRecord オブジェクトの配列を受け取るコールバックを指定します。各 MutationRecord は DOM 内の変更を表し、そこから追加および削除されたノードを抽出できます。

例とデモ

ここでは、項目が追加または追加されたときにコールバックがトリガーされる簡略化された例を示します。リスト要素から削除されました:

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

この記事には、コンソール ログを DOM として表示するライブ デモが付属しています。要素が追加または削除され、DOM の変更を監視する機能が示されます。

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