你不知道的MutationRecord

最新推荐文章于 2024-08-08 22:51:45 发布

紫微前端

最新推荐文章于 2024-08-08 22:51:45 发布

阅读量768

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/109799427

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

MutationRecord是用于跟踪DOM变化的重要工具，它在DOM更新时触发回调，并提供详细的变化信息。每个MutationRecord对象代表一次独立的DOM变化，包含了关于变化的所有关键属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个 MutationRecord 都代表一个独立的 DOM 变化，在每次随 DOM 变化调用 MutationObserver 的回调函数时，一个相应的 MutationRecord 会被作为参数，传递给回调函数。

属性

属性	类型	描述
`MutationRecord.type`	`String`	如果是属性变化，则返回 `"attributes"`；如果是 `characterData` 节点变化，则返回 `"characterData"`；如果是子节点树 `childList` 变化，则返回 `"childList"`。

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

紫微前端

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

你不知道的MutationObserver观察DOM树变动

liuhao9999的博客

11-19

1064

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。构造函数 MutationObserver() 创建并返回一个新的MutationObserver它会在指定的DOM发生变化时被调用。方法 disconnect() 阻止MutationObserver实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。 obse...

46、深入理解浏览器中的 Observer APIs

最新发布

corn8的博客

06-13

本文深入解析了浏览器中的三大 Observer APIs：Resize Observer API 用于监测元素大小变化，Intersection Observer API 能够跟踪元素在视口中的可见性，适用于实现懒加载和滚动动画；Mutation Observer API 提供了对 DOM 变化的异步监听能力，支持属性、文本和子节点的修改检测。文章详细介绍了每种 API 的使用方法、配置选项和实际应用场景，帮助开发者优化性能并实现复杂的交互逻辑。

参与评论您还未登录，请先登录后发表或查看评论

你不知道的 DOM 变动观察器：Mutation observer

frontend_frank的博客

04-25

277

DOM 变动观察器（Mutation observer）MutationObserver 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。我们将首先看一下语法，然后探究一个...

JavaScript零基础入门 13：DOM规范中的MutationObserver接口

学Java，找哪吒

03-24

6127

目录一、MutationObserver接口二、MutationObserver基本用法1、observe()方法2、回调与MutationRecord3、disconnect()方法4、复用MutationObserver三、MutationObserverInit与观察范围四、异步回调与记录队列五、性能、内存与垃圾回收1、 MutationObserver的引用2、MutationRecord的引用一、MutationObserver接口不久前添加到DOM规范中的MutationObserver接口

MutationObserver监听DOM变化

黄彪博客

02-15

2078

文章目录一、参考二、快速入门三、MutationObserver相关对象和方法3.1 MutationObserver3.2 MutationObserver.observe()3.3 MutationObserverInit四、经典案例4.1 MutationObserver的callback回调函数是异步的，只有在全部DOM操作完成之后才会调用callback。4.2 如何模拟添加节点？一、参考 MutationObserver MDN MutationObserver observe() MDN

dom更新监听之 --- Mutation Observer API

xiao_shutong的博客

06-26

1689

1. 概述 2. MutationObserver 构造函数 3. MutationObserver 的实例方法 3.1 observe() 3.2 disconnect()，takeRecords（） 4. MutationRecord 对象 5. 应用示例 5.1 子元素的变动 5.2 属性的变动 5.3 取代 DOMContentLoaded 事件 6. 参考链接 ...

MutationObserver，回调函数里的参数详细解释一下

04-10

用户可能想知道每个属性的具体应用场景和示例，比如如何通过addedNodes知道新增的节点，或者attributeName指出哪个属性发生了变化。此外，旧值的记录需要options中设置对应的选项，如attributeOldValue为true时才会...

《JavaScript高级程序设计》- 第十四章：DOM

qq_55978913的博客

02-27

878

第十四章：DOM 文档对象模型（Document Object Model）是HTML 和 XML文档的编程接口；就是开发者可以通过JavaScript编程，添加、删除、修改页面的各个部分； 14.1 节点层级任何HTML\XML文档都可以表示为由节点构成的层级结构。 <html> <head> <title>Sample Page</title> </head> <body>

“Mutation Observer：让DOM变化尽在掌握

zayyo的博客

08-08

1333

MutationObserver固然好用，但是其也存在缺点。首先是性能损耗虽然在MutationEvent的基础上优化了许多，但是监听body的操作对性能影响还是非常大的，一切用户操作可能都会使函数频繁的回调。解决方案：尽量限制监听范围，只监听必要的节点，或限制监听的变化类型，以减小回调的频率。其次是操作冲突由于回调函数非唯一性，如果两个观察者监听变化后的操作有依赖关系可能会造成错误或者冲突解决方案：我们可以采用锁的机制，确保在满足特定条件时才能执行相关操作，以避免冲突和错误。

网页应该如何录屏呢？

dichu2296的博客

08-06

967

摘要：网页应该如何录屏呢？作者：Winty 原文：用户行为录帧调研 Fundebug经授权转载，版权归原作者所有。关键点首先，每一次会话都有一个唯一的session ID，这是串联起所有行为的纽带。其次，用户行为又分成两个部分，其一是用户的操作，比如鼠标滑动，点击，页面滚动等，其二是页面的变化。这两者我们都统称为用户行为，记录在同一个队列中。一开始的时候，系统会记录下初...

JavaScript MoutationObserver监听DOM变化

weixin_44240581的博客

05-12

1051

概述用于监听DOM变动节点增删改属性变动内容变动异步事件，连续插入1000个<p>标签，只在1000个标签都插入结束才触发一次特点异步触发把DOM变动记录封装成一个数组来处理，不单独处理DOM变动既可观察DOM所有类型变动，也能指定只观察某一类变动 MutationObserver 构造函数语法： var observer = new MutationObserver(callback); 每次DOM变动后调用回调函数回调函数接受两个参数变动数组观察器实例

监听dom变化-Mutation observers

weixin_42733155的博客

11-07

2329

一、背景通常，为了响应某个变化而执行一段逻辑，我们可以将这段逻辑的调用，放在这个变化的入口或者出口。所谓入口，是指这个变化发生的源头，所谓出口，是指这个变化发生之后走的逻辑。这么说可能比较抽象，举个例子，页面上有个输入框，用户可以输入数字，也可能是通过后端推送的websocket更改输入框的数字，我们要在数字变化的时候触发个逻辑。有两种选择，一是入口。因为改变数字的原因，我们全都知道，所以可以监听输入框的Input事件，在这个事件里面触发对应的逻辑，同时在websocket的回调里触发对应的逻辑，此

javascript基础学习系列二百三十二：复用 MutationObserver

m0_68635815的博客

03-03

283

多次调用 observe()方法，可以复用一个 MutationObserver 对象观察多个不同的目标节点。此时，MutationRecord 的 target 属性可以标识发生变化事件的目标节点。调用 disconnect()并不会结束 MutationObserver 的生命。还可以重新使用这个观察者，再将它关联到新的目标节点。

javascript基础学习系列四百一十八：MutationObserver 接口

wanmeijuhao的博客

02-06

494

回调与 MutationRecord每个回调都会收到一个 MutationRecord 实例的数组。因为回调执行之前可能同时发生多个满足观察条件的事件，所以每次执行回调都会传入一个包含按顺序入队的 MutationRecord 实例的数组。这个方法接收两个必需的参数：要观察其变化的 DOM 节点，以及一个 MutationObserverInit 对象。执行以上代码后，元素上任何属性发生变化都会被这个 MutationObserver 实例发现，然后就会异步执行注册的回调函数。observe()方法。

回顾文档对象模型 (DOM)（三）

cyadyx的博客

09-27

274

1、MutationObserver 2、MutationRecord 3、Node 4、NodeFilter 5、NodeIterator 6、NodeList 7、ParentNode

JavaScript EventLoop

mmlz00的博客

06-05

295

js 事件循环机制： js事件循环机制：示例 MutationObserver <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="ES5" content="ES5规范引入了异步的微任务microtask，本轮同步任务结束后，通过E...

一起认识下浏览器的5种观察器

大转转FE

06-10

513

“图片懒加载”，这个词语想必大家再熟悉不过了。传统的实现方法是，监听scroll事件，获取img元素相对于视口的顶点位置el.getBoundingClientRect().top，只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域，当图片进入可视区域时再去加载图片资源。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能...

JavaScript怎么知道网页那个节点变化了

06-06

在回调函数中，可以通过MutationRecord对象获取变化的具体信息，例如变化的类型、变化发生的节点等。以下是一个简单的示例代码，演示如何使用MutationObserver来监测DOM节点的变化： ```javascript // 选择要监测...