快捷導(dǎo)航

JS監(jiān)聽元素dom變化方案詳解

更新時間：2023年09月10日 15:20:25 作者：前端小小白zyw

這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽元素dom變化的相關(guān)資料,監(jiān)聽DOM大小的變化,在前端開發(fā)中,算是一個比較常見的需求,比如我們要制作可伸縮的圖表的時候,可能需要根據(jù)DOM大小的變化,進行動態(tài)的更新圖表,需要的朋友可以參考下

前言

我們在開發(fā)中，會遇到一些需求，需要監(jiān)聽元素變化，比如元素屬性變化，元素大小變化，今天，我們就來聊聊倆種常用實現(xiàn)監(jiān)聽的方案，其他的自行研究

一、ResizeObserver

ResizeObserver 是來監(jiān)聽元素的大小位置發(fā)生變化，也可以說是回流(重排)時的變化

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

然后，我們創(chuàng)建監(jiān)聽器，進行監(jiān)聽

// 觀察元素變化
let el = document.getElementById('bg')
// 創(chuàng)建監(jiān)聽器
let ob = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 監(jiān)聽到的元素
    console.log(entry)
  }
})
// 監(jiān)聽尺寸變化
ob.observe(el)

隨之，拖動瀏覽器窗口，控制臺會打印，我們可以看到打印的日志，包含元素的大小信息

在使用完畢時，可以進行監(jiān)聽結(jié)束

ob.unobserve(el)

二、MutationObserver

MutationObserver 是用來監(jiān)聽DOM樹的修改，MutationObserver可以監(jiān)聽的屬性(配置)

屬性名	詳情	默認值
attributes	設(shè)為 true 以觀察受監(jiān)視元素的屬性值變更	false
attributeFilter	要監(jiān)視的特定屬性名稱的數(shù)組。如果未包含此屬性，則對所有屬性的更改都會觸發(fā)變動通知	無
characterData	設(shè)為 true 以監(jiān)視指定目標節(jié)點或子節(jié)點樹中節(jié)點所包含的字符數(shù)據(jù)的變化	無
childList	設(shè)為 true 以監(jiān)視目標節(jié)點（如果 subtree 為 true，則包含子孫節(jié)點）添加或刪除新的子節(jié)點	false
subtree	其他值也會作用于此子樹下的所有節(jié)點，而不僅僅只作用于目標節(jié)點	false

實現(xiàn)過程：

// 創(chuàng)建監(jiān)聽器
let ob = new MutationObserver(entries => {
  console.log(entries)
})
// 監(jiān)聽元素變化
ob.observe(el, { attributes: true, subtree: true })
// 修改背景顏色
el.style.backgroundColor = 'red'

我們可以看到控制臺，打印日志，觸發(fā)更新：