前端如何监听的dom元素的变化

使用场景

在前端开发中，会有这样的两种场景

• 承载3d场景或可视化的图表的canvas标签尺寸发生变化时，去做自适应重新渲染
• 当某个文本在标签内显示溢出样式控制出现省略号，鼠标浮动需要出现完整提示

出现这种情况时，可以通过去监听dom元素的变化，去做相应的控制，来实现这种类似的功能

具体实例

以下实例均使用Vue3去实现

MutationObserver¹

MutationObserver接口提供了监视对 DOM 树进行更改的能力。它被设计为旧的 Mutation Events 功能的替代产品，该功能是 DOM3 Events 规范的一部分。
下面是监听元素是否显示，从而控制按钮显隐的实例

<template>
    <div id="container">
        ....
    </div>
    <button v-if="showBtn">按钮</button>
</template>

<script setup>
const showBtn = ref(false)
let observer = null
onMounted(()=>{
    const btn = document.getElementById('container')
    // 创建一个MutationObserver实例
    //mutationsList:变化节点属性的数组
    observer = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
            //type = attributes:中某节点的一个属性值被更改
            //type = childList：从树上添加或移除一个或更多的子节点
            if (mutation.type = 'attributes' && mutation.attributeName == 'style') {
                showBtn.value = btn.style.display = 'none'
            }
        }
    })
    
    // 开始监听属性变化
    observer.observe(btn, { 
        attributes: true // 是否监视正在监视的一个或多个节点上属性值的更改
    });
})
beforeDestory(()=>{
    //disconnect() 取消对所有dom的监听
    observer.disconnect()
    observer= null
})
<script>

ResizeObserve²

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。
下面是监听元素尺寸变化去重新渲染echart图表的实例

<template>
    <div ref="echartsCon" style="width:100%;height:100%"></div>
</template>
<script setup>
let resize0bserver = null
const echartsCon = ref(null)
onMounted(()=>{
    resize0bserver = new ResizeObserver(() => {
        // 元素尺寸发生变化时触发的事件
        // 用requestAnimationFrame则为让它在下一帧去执行重新渲染echart
        requestAnimationFrame(() => {
            if (echartsCon.value) {
                this.chartChange();
            }
        });
    });
    // observe(target) target:需要观察的dom
    resize0bserver.observe(echartsCon.value);
})
// 组件被销毁前结束对dom的监听，销毁对象
beforeDestory(()=>{
    // unobserve(target) target:需要观察的dom
    // resize0bserver.unobserve(echartsCon.value)
    //disconnect() 取消对所有dom的监听
    resize0bserver.disconnect()
    resize0bserver = null
})
</script>

---

1. MotationObserve文档 ↩
2. ResizeObserve文档 ↩