MutationObserver（上）

最新推荐文章于 2024-09-16 16:19:02 发布
最新推荐文章于 2024-09-16 16:19:02 发布
阅读量568 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XZ85201/article/details/128175031
版权

首先MutationObserver接口是替换废弃的MutationEvent接口（MutationEvent定义了一系列DOM变化时触发的事件，浏览器处理事件的实现机制不同导致出现了严重的的性能问题）

MutationObserver接口，可以在DOM被修改时，异步执行回调；可以观察整个文档、DOM树的一部分，或某个元素。除此，还可以观察元素属性(attributes)、子节点(childList)、文本(characterData)，或者前三者任意组合的变化。

基本用法：

MutationObserver的实例需要通过调用MutationObserver构造函数并传入一个回调函数来创建

1、observe()方法：

新创建的MutationObserver实例不会关联DOM的任何部分。要把observer与DOM关联起来，需要使用observe()。这个接收两个必须的参数：observe(要观察变化的DOM节点，MutationObserverInit对象)

MutationObserverInit对象用于控制观察哪些方面的变化，是一个键/值形式配置选项的字典。

例：配置观察<body>元素上的属性变化：

    let mutation1 = new MutationObserver(()=>{console.log('<body>属性变化')});

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

    执行以上代码后，<body>元素上任何属性发生变化都会被这个MutationObserver实例发现，然      后就会异步执行注册的回调函数。<body>元素后代的修改或其他非属性修改都不会触发回到进      入任务队列

    验证：

    document.body.className='foo'

    console.log('body class变化');

   // body class变化

   // <body>属性变化

    注：回调中的console.log是后执行的。说明回调并非与实际的DOM变化同步执行

2、回调与MutationRecord

每个回调都会收到一个MutationRecord实例数组。MutationRecord包含发生了什么变化以及DOM的哪部分受到了影响。因为回调执行前可能同时发生多个满足观察条件的事件，所以每次执行回调都会传入一个包含按顺序入队的MutationRecord实例的数组

let mutation2 = new MutationObserver((MutationRecords) => { console.log(MutationRecords) });

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

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

// [

    //     {

    //         addedNodes:NodeList[],

    //         attributeName:"foo",

    //         attributeNamespace:null,

    //         nextSibling:null

    //         oldValue:null

    //         previousSibling:null

    //         removedNodes:NodeList[]

    //         target:body

    //         type:"attributes"

    //     }

// ]

例：涉及命名空间的类似变化

document.body.setAttributeNS('baz','foo', 'bar');

// [

    //     {

    //         addedNodes:NodeList[],

    //         attributeName:"foo",

    //         attributeNamespace:'baz',

    //         nextSibling:null

    //         oldValue:null

    //         previousSibling:null

    //         removedNodes:NodeList[]

    //         target:body

    //         type:"attributes"

    //     }

// ]

连续修改会生成多个MutationRecord实例，下次回调执行就会收到包含所有这些实例的数组，顺序为变化事件发生的顺序

document.body.className='foo';

document.body.className='bar';

document.body.className='baz';

[MutationRecord, MutationRecord, MutationRecord]

MutationRecord实例属性：

target被修改影响的目标节点
type字符串，标识变化的类型："attributes "、 " characterData" 或 "childList"
oldValue如果在MutationObserverInit对象中启用 （attributeOldValue或characterData OldValue为true), "attributes"或"characterData"的变化事件会设置这个属性为被替代的值；"childList"类型的变化始终将这个属性设置为null
attributeName对于"attributes"类型的变化,这里保存被修改属性的名字
attributeNamespace对于使用了命名空间的"attributes"类型的变化，这里保存被修改属性的名字其他变化事件会将这个属性设置为null
addedNodes对于"childList"类型的变化,返回包含变化中添加节点的NodeList默认为空 NodeList
removedNodes对于"childList"类型的变化,返回包含变化中删除节点的NodeList删除节点的NodeList默认为空 NodeList
previousSibling对于"childList"类型的变化，返回变化节点的前一个同胞Node默认为null
nextSibling对于"childList"类型的变化，返回变化节点的后一个同胞Node默认为null

传给回调函数第二个参数是观察变化的MutationObserver实例

let mutation3 = new MutationObserver((MutationRecords,MutationObserver) => { console.log(MutationRecords,MutationObserver) });

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

document.body.className='foo';

3、disconnect()

默认情况下，只要被观察的元素不被垃圾回收，MutationObserver的回调就会响应DOM变化事件，从而执行。要提前终止执行回调，可以调用disconnect()

    例：正常调用，不仅会停止此后变化事件的回调，也会停止已经加入任务队列的回调

    let disconnect = new MutationObserver((MutationRecords) => {     console.log(MutationRecords)});

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

    document.body.className='foo';

    disconnect.disconnect();

    document.body.className='bar';

    //没有日志输出

要想让已加入任务队列的回调执行，可以使用setTimeOut()让已经入列的回调执行完毕，再调用disconnect()

setTimeout(()=>{

        disconnect.disconnect();

        document.body.className='bar';

 },0)

// [

    //     {

    //         addedNodes:NodeList[],

    //         attributeName:"foo",

    //         attributeNamespace:null,

    //         nextSibling:null

    //         oldValue:null

    //         previousSibling:null

    //         removedNodes:NodeList[]

    //         target:body.bar

    //         type:"attributes"

    //     }

// ]

4、复用MutationObserver

多次调用observe()方法，可以重复使用一个MutationObserver对象观察多个不同的目标节点。此时，mutationRecord的target属性可以标识目标节点

let mutation4 = new MutationObserver((MutationRecords) => console.log(MutationRecords.map(x=>x.target)));

    向页面body添加两个子节点

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

         childB = document.createElement('span');

    document.body.appendChild(childA);

    document.body.appendChild(childB);

    观察两个子节点

    mutation4.observe(childA,{attributes:true})

    mutation4.observe(childB,{attributes:true})

    修改两个子节点属性

    childA.setAttribute('foo','bar')

    childB.setAttribute('foo','bar')

   //[div,span]

5、重用MutationObserver

调用disconnect()方法并不会结束MutationObserver的生命。还可以重新使用这个观察者，再将它关联到新的目标节点。

例：先断开然后又恢复了观察者与<body>元素的关联

    let mutation5 = new MutationObserver((MutationRecords) =>              MutationRecords.map((x)=>console.log(x.attributeName)));

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

    这行代码会触发变化事件

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

    setTimeout(()=>{

        mutation5.disconnect();

        //这行代码不会触发变化事件

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

    },0)

    setTimeout(()=>{

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

        //这行代码会触发变化事件

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

    },0)

    //foo,baz

星之仔
关注
详解Netty中的责任链Pipeline如何管理ChannelHandler
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
07-30 2176
因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。的关系，以及传播顺序，建议读者按照笔者的说明进行handler编排，并解耦各个处理器的逻辑，由此提升程序的稳定性和可维护性。抽象，然后解析该事件的操作位是读事件，于是直接调用。的write方法的实现，可以看到其内部本质就是调用。
MutationObserver对象
太阳当空照，花儿对我笑，微风轻轻拂，心情无限好。
05-11 447
对象提供了监视对DOM树所做更改的能力，其被设计为旧的功能的替代品(该功能是规范的一部分)。
使用Mutation Observer监听DOM变化（也许是最完全指南？）
百岁如流富贵冷灰的博客
12-07 4227
前言 打开自己的博客，猛然发现自己已经有快两个月没有更新了，一方面是因为确实没有遇到什么特别值得记录的问题及知识点，另一方面则是所在部门的组织架构调整，唉（????）日子难过啊，没啥心情更新。 正题 众所周知，我们监听input值得变化，我们可以通过绑定事件来实现。但是对于DOM元素的属性、数据的变化我们应该如何监听呢。 这个时候就需要用到我们今天的主角了：MutationObserver，它提供了监视对DOM树所做更改的能力。目前可以监听DOM节点的属性、CharacterData以及子元素的变化。 介绍
JavaScript核心之变动观察器（Mutation Observer）
上善若泪
05-03 8064
目录 1 变动观察器（mutation observer）概述 2 MutationObserver构造函数 3 Mutation Observer实例的方法 3.1 observe() 3.2 disconnect()，takeRecords（） 3.3 MutationRecord对象 4 应用示例 4.1 子元素的变动 4.2 属性的变动 4.3 取代DOMContent...
MutationObserver详解
qq_42753983的博客
03-08 633
1.基于之前Chrome游览器插件开发的过程中，会遇到在插件控制台打印被安游览器页面的元素，一直未解决。后来找到了解决了办法可以使用MutationObserver；使用MutationObserver这个可以在被安游览器页面直接打印页面元素等等，可能你会说本来不就可以获取吗。会在最后附上插件具体代码。对一个节点添加观察器，就像使用addEventListener方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。但是，如果指定不同的options对象，就会被当作两个不同的观察器。
浅谈MutationObserver
m0_45093055的博客
05-27 1407
MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。
MutationObserver API
知秋
09-03 313
1、概述 MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 但是，它与Mutation Events事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到...
一个MutationObserver类似于CSS选择器的API
08-10
MutationObserver是JavaScript中用于观察DOM树变化的一个强大API。它的工作原理是监控指定DOM节点及其子节点，当这些节点发生添加、删除、属性修改等变化时，MutationObserver会捕获这些变化并将其作为...
MutationObserver
07-28
MutationObserver是浏览器提供的一种API，用于监测DOM树的变化。它可以观察到指定DOM节点及其子节点的变化，并在变化发生时执行回调函数。 MutationObserver可以用于监听DOM的属性变化、子节点的添加或删除、文本...
dom-op-tester:使用 MutationObserver 测试可能导致回流的 DOM 操作
07-05
MutationObserver 是 JavaScript 中一个强大的工具，用于监听 DOM 树的变化。在前端开发中，DOM 操作往往是性能的关键因素，特别是那些可能导致页面回流 (reflow) 和重绘 (repaint) 的操作，它们会严重影响用户体验...
MutationObserver撤销替换.html
08-03
代码实现了前进和后退功能，所有元素下的元素变动都会被插件记录下来。
【JavaScript】MutationObserver 观察者构造函数用法
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
05-30 122
1.MutationObserver() 创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即...
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver：原理与实战案例
最新发布
RenGJ010617的博客
09-16 3749
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时，我们经常需要监测 DOM 的变化，这时候，MutationObserver 就显得格外有用。在这篇博客中，我们将详细介绍 MutationObserver 的工作原理，并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
MutationObserver 方法
Scar的博客
08-11 1406
MutationObserver 是什么 MutationObserver API 让我们能监听 DOM 树变化，该 API 设计用来替换掉在 DOM 3 事件规范中引入的 Mutation events。 Mutation events 是同步触发的，每次变动都会触发一次调用。 MutationObserver API 是异步触发的， DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。所以 MutationObserver 相比 Mutation events 性能要更高。 代码
MutationObserver的示例代码的使用(附示例代码)
白的夜的博客
01-21 1241
首先先介绍一下MutationObserver的特点1.MutationObserver的回调属于微队列2.它会在触发指定 DOM 事件时，调用指定的回调函数，说白了就是用来检测DOM节点的。
了解HTML5中的MutationObserver
weixin_33824363的博客
01-10 336
MutationObserver翻译过来就是变动观察器，字面上就可以理解这是用来观察Node（节点）变化的。MutationObserver是在DOM4规范中定义的，它的前身是MutationEvent事件，该事件最初在DOM2事件规范中介绍，到来了DOM3事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用。 Mutati...
一定要了解Mutation Observer
weixin_39489765的博客
03-02 302
Mutation Observer
MutationObserver 用法总结( 监听节点、DOM变化 )
热门推荐
weixin_45412353的博客
07-07 2万+
一、认识MutationObserver 今天在查看Event Loop相关的文章的时候，看见了MutationObserver类，然后自己看了一下，在这做下总结 MutationObserver：原生api中用来监听node节点变化的一个类，用来代替Mutation Events 我们先来看看MutationObserver中有哪些方法 我们使用dir函数输出一下 我们可以看到MutationObserver中有三个方法，我们一一来看 observe observe(target, config)
MutationObserve的使用和应用
赵天铭的博客
11-23 3464
MutationObserve的使用和应用 前言 最近接到一个项目需求，就是把另一个项目嵌入到当前项目中。要求很简单，让人看不出这是嵌入过来的。 本来觉得这也没什么，因为以前也做过一次。 方案无非就是通过iframe嵌入，通过postMessage进行通信（ps:两个项目都是我们自己的，可以修改代码）。 其他的一切都ok，就有个一个问题困扰了。 我们当前的项目是一个典型的圣杯布局，头部和底部都要显...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值