JS は要素の dom の変更を監視します

開発中には、要素の属性の変更や要素のサイズの変更など、要素の変更を監視する必要がある場合があります。今日は、一般的に使用される 2 つの監視ソリューションについて説明します。他のものは自分で調査できます。

一、リサイズオブザーバー

ResizeObserverリフロー（再配置）時の変化ともいえる、要素の大きさや位置の変化を監視するものです。

<div style="width: 100vw; height: 100vh; background-color: deepskyblue" id="bg">

次に、リスナーを作成して聞きます

// 观察元素变化
let el = document.getElementById('bg')

// 创建监听器
let ob = new ResizeObserver(entries => {
    
    
  for (let entry of entries) {
    
    
    // 监听到的元素
    console.log(entry)
  }
})
// 监听尺寸变化
ob.observe(el)

その後、ブラウザウィンドウをドラッグするとコンソールが出力され、要素のサイズ情報を含むログが出力され、

使用が完了すると監視が完了します。

ob.unobserve(el)

二、MutationObserver

MutationObserverDOMツリーの変更やMutationObserver監視可能なプロパティ(設定)を監視するために使用されます。

属性名	詳細	デフォルト値
属性	監視対象要素のプロパティ値の変更を監視するには true に設定します。	間違い
属性フィルター	監視する特定のプロパティ名の配列。このプロパティが含まれていない場合、すべてのプロパティを変更すると変更通知がトリガーされます。	なし
文字データ	指定したターゲット ノードまたはサブノード ツリー内のノードに含まれる文字データの変更を監視するには、true に設定します。	なし
子リスト	新しい子ノードの追加または削除のためにターゲット ノード (サブツリーが true の場合は子孫ノード) を監視するには、true に設定します。	間違い
サブツリー	他の値も、ターゲット ノードだけでなく、このサブツリーの下のすべてのノードに適用されます。	間違い

実装プロセス:

// 创建监听器
let ob = new MutationObserver(entries => {
    
    
  console.log(entries)
})
// 监听元素变化
ob.observe(el, {
    
     attributes: true, subtree: true })
// 修改背景颜色
el.style.backgroundColor = 'red'

コンソールを表示し、ログを出力し、更新をトリガーできます。

リスニングをキャンセルします。

ob.disconnect()