定義方法DOM监测:

新しく追加された DOM
DOM プロパティの変更
ドムを削除する

通常は 2 つの方法があり、ノードの変更を監視するために DOM イベントを早期に使用することは推奨されなくなりました。現在推奨されているMutationObserver。

1.DOMイベント

イベント	効果	予防
DOMNodeIntoDocument	ノードの挿入を検出するために使用されます	このイベントは、ノードがドキュメントに挿入された場合にのみトリガーされます。
DOMノードが挿入されました	ノードの挿入を検出するために使用されます	ノードがドキュメントまたは非ドキュメントに挿入されたときにトリガーされます
DOMNodeRemovedFromDocument	ノードの削除を検出するために使用されます	このイベントは、ノードがドキュメントから削除された場合にのみトリガーされます。
DOMノードが削除されました	ノードの削除を検出するために使用されます	このイベントは、ノードがドキュメントまたは非ドキュメントから削除された場合にのみトリガーされます。
DOM属性変更済み	DOM プロパティの変更を検出するために使用されます
DOMCharacterDataModified	DOM ノードのテキスト変更を検出する
DOMサブツリー変更されました	(DOMAttributeModified、DOMCharacterDataModified、DOMNodeInserted、DOMNodeInsertedIntoDocument、DOMNodeRemoved、および DOMNodeRemovedFromDocument) の代わりに使用されます。	IE9 環境にはバグがあり、ノードが初めて挿入されたときに、このイベントがすぐにトリガーされません。

ここでは非DocumentノードがDOMツリー上にない場面を指します。ノードストレージやメモリなど、コードデモ

二、MutationObserver

MutationObserver追加、削除、属性の変更など、独自のノードと子ノードの変更を監視する機能を提供します。例：

const callback = (mutationRecords) => {
    
    };
const observer = new MutationObserver(callback);

const targetNode = document.querySelector("#node");
const option = {
    
    
  subtree: false,
  childList: false,
  attributes: true,
  attributeFilter: undefined,
  attributeOldValue: false,
  characterData: false,
  characterDataOldValue: false,
};
observer.observe(targetNode, option);

構成	デフォルト	説明する
サブツリー	間違い	ターゲットノードのすべての子孫ノードをリッスンします
子リスト	間違い	ターゲットノードの子ノードの追加および削除の動作を監視する
属性	間違い	ターゲットノードのプロパティの変更をリッスンします。
属性フィルター	未定義	値が配列の場合、指定されたプロパティの値の変更のみを検出します。
属性古い値	間違い	プロパティの古い値を記録するかどうか
文字データ	間違い	テキストノードの変化を監視するかどうか
文字データ古い値	間違い	テキストノードの古い値をログに記録するかどうか

DOM監視

1.DOMイベント

二、MutationObserver

3. 参考資料

おすすめ