MutationObserver 监听DOM对象的变化

雨点打透心脏的1/2处 2023-07-17 15:49 12阅读 0赞

**`MutationObserver` 可以通过监听DOM对象的子节点的变化（`childList`）、属性的变化（`attributes`）和后代节点的变化（`subtree`），当以上内容发生改变时触发回调函数。**

#### 实例化 MutationObserver ####

const observer = new MutationObserver(callback)

#### 创建监听 observe ####

observer.onserve(ele,{ 
    	childList: true, // 子节点的变化
    	attributes: true, // 属性的变化
    	subtree: true, // 后代节点的变化
    })

#### 取消监听 ####

observer.disconnect()

#### 实例 ####

<ul id="container"></ul>
    <button id="btn">点击</button>

const ul = document.getElementById("container")
    let count = 0
    document.getElementById('btn').onclick = () => { 
        count++;
        const li = document.createElement('li');
        li.innerHTML = count;
        ul.appendChild(li)
    }
    
    const observer = new MutationObserver((e) => { 
        console.log('发生改变',e)
    })
    
    observer.observe(ul, { 
        attributes: true,
        childList: true,
        subtree: true
    })

![在这里插入图片描述][20200323091215609.png_pic_center]

[20200323091215609.png_pic_center]: /images/20230528/4592bc50d6fe41ecaa5488fb08227f71.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 MutationObserver 监测 DOM 变化

网络应用在客户端日益复杂，这是由很多因素的造成的，比如需要更加丰富的界面交互以提供更加复杂的应用功能，实时计算等等。网络应用的日益复杂导致无法知晓其生命周期中指定时刻准确的

Myth丶恋晨/ 2023年10月10日 20:09/ 0 赞/ 60 阅读

相关 JS监听dom高度变化方法总结

![bc2d7b3ba4b148ae817a9e70cfd3520b.png][]前言有时候我们需要监听dom的变化，例如有时候图片未加载完就取 dom 的高度，这样会

缺乏、安全感/ 2023年10月09日 23:39/ 0 赞/ 48 阅读

相关 MutationObserver 监听DOM对象的变化

`MutationObserver` 可以通过监听DOM对象的子节点的变化（`childList`）、属性的变化（`attributes`）和后代节点的变化（`subtree`

雨点打透心脏的1/2处/ 2023年07月17日 15:49/ 0 赞/ 13 阅读

相关监测div大小变化_JavaScript监听一个DOM元素大小变化

1.需求场景开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要

谁借莪１个温暖的怀抱￠/ 2023年01月01日 06:52/ 0 赞/ 743 阅读

相关 js监听dom变化(未完善)

var MO_options = { attributes: true, childList: true,subtree:false,attributeOldValu

刺骨的言语ヽ痛彻心扉/ 2022年12月29日 06:51/ 0 赞/ 187 阅读

相关 Vue - watch监听对象变化

1. 监听非对象的属性监听props-msg和data，分别是String和Number属性；可以正常监听到变化 // Parent <te

蔚落/ 2022年12月23日 03:53/ 0 赞/ 288 阅读

相关 vue和js文件相互监听DOM内容变化

前言：vue文件引入一个js文件，js中的按钮控制vue input弹框的出现，vue中的弹框输入的内容需要存入js文件。（ps:不要问为何不都用vue，设计如此），那么现在

傷城~/ 2022年11月29日 05:58/ 0 赞/ 356 阅读

相关监听 html dom 变化,js怎么监听元素属性变化

我觉得MutationObserver可以用啊，正常情况下，这个等待DOM操作结束再执行的异步回调没什么问题吧。什么业务实时性要那么高啊？一般一个事件里面同步的不会有同个属性

梦里梦外;/ 2022年10月06日 10:53/ 0 赞/ 291 阅读

相关 vue 2.0 watch 监听对象的变化

导读使用 `Vue` 中的 `watch` 方法监听对象，设置 `deep:true` 可以进行深度监听，当对象中的属性发生变化时，会调用 `handler` 方法。

矫情吗；*/ 2022年01月07日 13:47/ 0 赞/ 666 阅读

相关 h5 mutationObserver监听

能够提供对DOM树更细致的监听 (1)创建一个观察器实例并传入回调函数 const observer = new MutationObse

水深无声/ 2021年07月25日 00:45/ 0 赞/ 323 阅读