快捷導(dǎo)航

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

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

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

前言

我們?cè)陂_(kāi)發(fā)中，會(huì)遇到一些需求，需要監(jiān)聽(tīng)元素變化，比如元素屬性變化，元素大小變化，今天，我們就來(lái)聊聊倆種常用實(shí)現(xiàn)監(jiān)聽(tīng)的方案，其他的自行研究

一、ResizeObserver

ResizeObserver 是來(lái)監(jiān)聽(tīng)元素的大小位置發(fā)生變化，也可以說(shuō)是回流(重排)時(shí)的變化

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

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

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

隨之，拖動(dòng)瀏覽器窗口，控制臺(tái)會(huì)打印，我們可以看到打印的日志，包含元素的大小信息

在使用完畢時(shí)，可以進(jìn)行監(jiān)聽(tīng)結(jié)束

ob.unobserve(el)

二、MutationObserver

MutationObserver 是用來(lái)監(jiān)聽(tīng)DOM樹(shù)的修改，MutationObserver可以監(jiān)聽(tīng)的屬性(配置)

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

實(shí)現(xiàn)過(guò)程：

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

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