MutationObserver（下）

最新推荐文章于 2025-07-16 15:53:37 发布
原创 最新推荐文章于 2025-07-16 15:53:37 发布 · 933 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端 #javascript #开发语言
本文详细介绍了MutationObserver对象及其初始化参数MutationObserverInit，展示了如何利用这些参数观察DOM节点的属性、字符数据及子节点的变化，并提供了丰富的示例代码。

MutationObserverInit对象

MutationObserverInit对象用于控制对目标节点的观察范围。粗略的讲观察者可以观察的事件包括属性变化、文本变化和子节点变化。

MutationObserverInit对象属性：

subtree

布尔值,表示除了目标节点，是否观察目标节点的子树（后代）

如果是false,则只观察目标节点的变化;如果是true，则观察目标节点及其整个子树

默认为false

attributes布尔值,表示是否观察目标节点的属性变化
attributeFilter字符串数组,表示要观察哪些属性的变化
attributeOldValue

布尔值,表示 MutationRecord是否记录变化之前的属性值

把这个值设置为true也会将attributes的值转换为true

默认为false

characterData

布尔值,表示修改字符数据是否触发变化事件

默认为false

characterDataOldvalue

布尔值，表示 MutationRecord是否记录变化之前的字符数据

把这个值设置为true也会将 characterData的值转换为true

默认为false

childList

布尔值,表示修改目标节点的子节点是否触发变化事件

默认为false

注：在调用observer()时，MutationObserverInit对象中的attributes、characterData和childList属性必须至少有一项为true(无论是直接<br>设置这几个属性，还是通过设置attributeOldValue等属性间接导致它们的值转换为true)。否则会抛出错误，因为没有任何变化事件可能触发回调

1、观察属性

        MutationObserver可以观察节点属性的添加、移除和修改。要为属性变化注册回调，需要在            MutationObserverInit对象中将attributes属性设置为true

        例：

        let mutationAttr1 = new                MutationObserver((MutationRecords)=>console.log(MutationRecords));

        mutationAttr1.observe(document.body,{attributes:true});

        // 添加属性

        document.body.setAttribute('foo','bar');

       // 修改属性

        document.body.setAttribute('foo','baz');

       // 删除属性

        document.body.removeAttribute('foo');

        以上的变化都被记录下来了

        // [MutationRecord, MutationRecord, MutationRecord]

        把attributes设置为true的默认行为是观察所有属性，但不会在MutationRecord对象中记录原来的值。如果想观察某个或某几个属性，可以使用attributeFilter

        属性来设置白名单，即一个属性明字符串数组

        let mutationAttr2 = new         MutationObserver((MutationRecords)=>console.log(MutationRecords));

        mutationAttr2.observe(document.body,{attributeFilter:['foo']});

        //添加白名单

        document.body.setAttribute('foo','bar');

        //添加被排除的属性

        document.body.setAttribute('baz','qux');

        //只有foo属性的变化被记录了

        // [

        //     {

        //         addedNodes:NodeList[],

        //         attributeName:"foo",

        //         attributeNamespace:null,

        //         nextSibling:null

        //         oldValue:null

        //         previousSibling:null

        //         removedNodes:NodeList[]

        //         target:body

        //         type:"attributes"

        //     }

        // ]

如果想在变化记录中保存属性原来的值可以将attributeOldValue属性设置为true

        let mutationAttr3 = new         MutationObserver((MutationRecords)=>console.log(MutationRecords.map((x)=>x.oldValue))        );

        mutationAttr3.observe(document.body,{attributeOldValue:true});

        document.body.setAttribute('foo','bar');

        document.body.setAttribute('foo','baz');

        document.body.setAttribute('foo','qux');

        //[null, 'bar', 'baz']

2、观察字符数据

        let mutationCharacterData1 = new         MutationObserver((MutationRecords)=>console.log(MutationRecords));

        //创建观察的文本节点

        document.body.firstChild.textContent='foo';

        mutationCharacterData1.observe(document.body.firstChild,{characterData:true});

        //赋值为相同的字符串

        document.body.firstChild.textContent='foo';

        //赋值为新字符串

        document.body.firstChild.textContent='bar';

        //通过节点设置函数赋值

        document.body.firstChild.textContent='baz';

        //以上变化都被记录下来了

        //[MutationRecord,MutationRecord,MutationRecord]

将characterData属性设置为true的默认行为不会在MutationRecord对象中记录原来的字符数据。如果想在变化记录中保存原来的字符数据可以将characterDataOldValue属性设置为true

        let mutationCharacterData2 = new         MutationObserver((MutationRecords)=>console.log(MutationRecords.map((x)=>x.oldValue))        );

        //创建观察的文本节点

        document.body.firstChild.textContent='foo';

        mutationCharacterData2.observe(document.body.firstChild,{characterDataOldValue:true});

        //赋值为相同的字符串

        document.body.firstChild.textContent='foo';

        //赋值为新字符串

        document.body.firstChild.textContent='bar';

        //通过节点设置函数赋值

        document.body.firstChild.textContent='baz';

        //每次变化都保留了上一次的值

        //['foo', 'foo', 'bar']

3、观察子节点

MutationObserver可以观察目标节点子节点的添加和移除。要观査子节点，需要在MutationObserverInit对象中将childList属性设置为true

例：添加子节点

        let mutationChildList1 = new         MutationObserver((MutationRecords)=>console.log(MutationRecords));

        mutationChildList1.observe(document.body,{childList:true});

        let div = document.createElement('div');

        document.body.appendChild(div);

        // [

        //     {

        //         addedNodes:NodeList[div],

        //         attributeName:null,

        //         attributeNamespace:null,

        //         nextSibling:null

        //         oldValue:null

        //         previousSibling:null

        //         removedNodes:NodeList[]

        //         target:body

        //         type:"childList"

        //     }

        // ]

例：移除子节点

在以上例子的基础上移除div

document.body.removeChild(div)

        // [

        //     {

        //         addedNodes:NodeList[],

        //         attributeName:null,

        //         attributeNamespace:null,

        //         nextSibling:null

        //         oldValue:null

        //         previousSibling:null

        //         removedNodes:NodeList[div]

        //         target:body

        //         type:"childList"

        //     }

        // ]

对子节点重新排序(尽管调用一个方法即可实现)会报告两次变化事件，因为从技术上会执行先移除再增加

        let mutationChildList2 = new         MutationObserver((MutationRecords)=>console.log(MutationRecords));

        //创建两个初始子节点

        document.body.appendChild(document.createElement('div'));

        document.body.appendChild(document.createElement('span'));

        mutationChildList2.observe(document.body,{childList:true});

        //交换子节点顺序

        document.body.insertBefore(document.body.lastChild,document.body.firstChild)

        //第一次是节点被删除，第二次是节点被添加

        // [

        //     {

        //         addedNodes:NodeList[],

        //         attributeName:null,

        //         attributeNamespace:null,

        //         nextSibling:null

        //         oldValue:null

        //         previousSibling:div

        //         removedNodes:NodeList[span]

        //         target:body

        //         type:"childList"

        //     }

        // ]

        // [

        //     {

        //         addedNodes:NodeList[span],

        //         attributeName:null,

        //         attributeNamespace:null,

        //         nextSibling:div

        //         oldValue:null

        //         previousSibling:null

        //         removedNodes:NodeList[]

        //         target:body

        //         type:"childList"

        //     }

        // ]

4、观察子树

默认情况下，MutationObserver将观察的范围限定为一个元素及其子节点的变化。可以把观察的范围扩展到这个元素的子树(所有后代的节点)，这需要在MutationObserverInit对象中subtree属性设置为true

例：观察元素及其后代节点属性的变化

        let mutationObserver = new         MutationObserver((MutationRecords)=>console.log(MutationRecords));

        //创建一个后代

        document.body.appendChild(document.createElement('div'));

        //观察body元素及其子树

        mutationObserver.observe(document.body,{attributes:true,subtree:true});

        //修改body元素的子树

        document.body.firstChild.setAttribute('foo','bar')

        //[

        //     {

        //         addedNodes:NodeList[],

        //         attributeName:'foo',

        //         attributeNamespace:null,

        //         nextSibling:null

        //         oldValue:null

        //         previousSibling:null

        //         removedNodes:NodeList[]

        //         target:div

        //         type:"childList"

        //     }

        // ]

takeRecords()方法

takeRecord()方法可以清空记录队列，取出并返回其中所有的MutationRecord实例

例：

let observer = new MutationObser=((mutationRecords)=>console.log(mutationRecords));

observer.observe(document.body, { attributes: true });

document.body.className='foo';

document.body.className='bar';

document.body.className='baz';

console.log(observer.takeRecord());

console.log(observer.takeRecord());

//[MutationRecord, MutationRecord, MutationRecord]

//[]

此方法在希望断开与观察目标的联系，但又希望处理由于调用disconnect()而抛弃的记录队列中的MutationRecord实例时比较实用

星之仔
关注
记一个MutationObserver的问题
u011393161的博客
05-24 2929
http://www.cnblogs.com/dong-xu/p/7000139.html 看上面这篇文章的时候，看到有个例子是讲MutationObserver的，非常费解，两个元素，一父一子，父元素设置上observer，点击子元素的时候，observer会触发两次，应该是事件冒泡了，没问题，但是对子元素调用click()的时候，父元素的点击回调也照样执行，但是observer只触发了一次，...
作为前端开发，你了解MutationObserver吗？
00后|互联网💻|办公室🍵茶农，希望通过技术改变生活|爱折腾💪|收集各类📚网络资源，好物不私藏，点点关注，不迷路。 全网搜：阿宇的编程之旅 or 阿宇的宝库
06-12 5373
MutationObserver在开发中或许不常使用，但是特殊情况下确实可以解决某些问题。和addEventListener有些类似，当用户触发了某些事件操作时会调用对应的回调 我也是前些天在需求迭代中第一次使用MutationObserver，由于Antd早期版本的弹窗没有做响应功能，以及代码中的弹窗许多没有进行二次封装，导致无法得知弹窗何时出现及消失，于是我使用前端Hack的方式取个巧，监听元素变化解决了此类问题，这里也是做个知识点分享
MutationObserver无法监听宽度变化，使用vue自定义指令
viviuolo的博客
07-08 1467
MutationObserver无法监听DOM长宽变化，使用vue自定义指令监听DOM长宽变化
关于DOMContentLoaded死活无效的解决方案
cxyd4399的博客
05-11 1607
let observer = new MutationObserver( (mutationRecords) => { for (let mr of mutationRecords) { for (let el of mr.addedNodes) { if (el.nodeName === 'DIV') { alert("..
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver：原理与实战案例
RenGJ010617的博客
09-16 9389
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时，我们经常需要监测 DOM 的变化，这时候，MutationObserver 就显得格外有用。在这篇博客中，我们将详细介绍 MutationObserver 的工作原理，并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
MutationObserver详解
qq_35385241的博客
12-17 4万+
MutationObserver用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。 但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。 Mutation Observer 有以下特点： 它等待所有脚本任务完成后，才会运行（即异步触发方式）。 它把 DOM 变动
作为前端你还不懂MutationObserver？那Out了
热门推荐
编码世界
12-02 6万+
MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。
MutationObserver
梦殇的博客
08-12 1862
MutationObserver MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 简单来讲就是使用Mutationboserver可以监听dom节点的属性变化，节点的删除增加等一系列变化 那MutationObserver有啥用呐？ 页面水印的制作 防止水印被用户...
MutationObserver与IntersectionObserver的区别
dfc_dfc的博客
11-11 963
MutationObserver和IntersectionObserver的区别
MutationObserver、IntersectionObserver、ResizeObserver
Jsoning的博客
03-09 2532
前言 阅读本文你可以获取到以下3个知识点 通过原生javascript的API 监听DOM元素的改变（文字、大小、背景等等） 监听DOM元素之间是否相交等信息 监听DOM元素大小改变，基本可以放弃全局监听window.rize了 动动小手，先点赞再观看???????????? MutationObserver MutationObserver 创建一个观察器，提供了对监视DOM树更改的能力，是DOM3 Even...
浅谈MutationObserver
m0_45093055的博客
05-27 2496
MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。
MutationObserver 用法总结( 监听节点、DOM变化 )
weixin_45412353的博客
07-07 2万+
一、认识MutationObserver 今天在查看Event Loop相关的文章的时候，看见了MutationObserver类，然后自己看了一下，在这做下总结 MutationObserver：原生api中用来监听node节点变化的一个类，用来代替Mutation Events 我们先来看看MutationObserver中有哪些方法 我们使用dir函数输出一下 我们可以看到MutationObserver中有三个方法，我们一一来看 observe observe(target, config)
MutationObserver 监听 DOM 变化
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-06 1498
在性能方面，我们需要注意不要过度监听 DOM 的变化，特别是那些频繁变化的元素。它比传统的事件监听器更加灵活，因为它可以监听到任意类型的 DOM 变化，包括元素的添加、删除、属性的修改等。在 Web 开发中，我们经常会遇到需要监听 DOM 元素的变化以响应某些行为的情况。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）学习路线(点击解锁）
DOM 规范中的 MutationObserver 接口
最新发布
Irene1991的博客
07-16 1万+
DOM规范中的 MutationObserver 接口可以在DOM被修改时异步执行回调。浏览器会自动合并多次变更以提升性能。
MutationObserver简介
ddkddkchen的博客
10-24 2473
文章目录MutationObserver简介MutationObserver的使用MutationObserverInitattributesattributeOldValueattributeFiltercharacterDatachildList总结与注意注意一参考资料END MutationObserver简介 在某些情况下需要监听DOM元素的属性变化，而这些变化不会触发原生事件，难以监听就...
MutationObserver -- 判断vue Dom渲染完成
weixin_41801013的博客
01-16 5487
MutationObserverMutationObserver -- 判断vue Dom渲染完成MutationObserver 作用方法应用实例 MutationObserver – 判断vue Dom渲染完成 获取想要获取dom元素的宽高,打印出来的结果值一直小于DOM元素本身高度。查阅很多资料无果，初步判断是vue升级以后，this.$nextTick监听方式发生改变。 更改方案，...
MutationObserver 方法
Scar的博客
08-11 1564
MutationObserver 是什么 MutationObserver API 让我们能监听 DOM 树变化，该 API 设计用来替换掉在 DOM 3 事件规范中引入的 Mutation events。 Mutation events 是同步触发的，每次变动都会触发一次调用。 MutationObserver API 是异步触发的， DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。所以 MutationObserver 相比 Mutation events 性能要更高。 代码
DOM 规范 — MutationObserver 接口
weixin_43822185的博客
11-13 1231
DOM 规范 — MutationObserver 接口
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值