MutationObserver对象

最新推荐文章于 2024-07-18 17:32:29 发布
最新推荐文章于 2024-07-18 17:32:29 发布
阅读量427 收藏
点赞数 18
分类专栏： Web学习笔记 Java学习进阶 文章标签： 前端 javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Runnymmede/article/details/138679354
版权

MutationObserver对象

MutationObserver (W3C DOM4)对象提供了监视对DOM树所做更改的能力，其被设计为旧的Mutation Events功能的替代品(该功能是DOM3 Events规范的一部分)。

描述

Mutation Observer用来监视DOM变动，DOM的任何变动，例如节点的增减、属性的变动、文本内容的变动，在配置之后都可以通过回调函数来获得通知。Mutation Observer类似于事件的监听DOM.addEventListener方法，都可以在触发某些变动的时候来执行回调函数，只不过Mutation Observer是异步触发，DOM的变动并不会马上触发，在等到当前所有DOM操作都结束才触发。

observe

mutationObserver.observe(target[, options])
Mutation Observer的observe()方法配置了Mutation Observer对象的回调方法，以开始接收与给定选项匹配的DOM变化的通知。

  • target: DOM树中的一个要观察变化的DOM Node，或者是被观察的子节点树的根节点。
  • options
了解本专栏 订阅专栏 解锁全文 超级会员免费看
北航程序员小陈
关注
  • 18
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
MutationObserver对象的使用
蜗牛的博客
11-19 1008
问题：在对div设置属性 contenteditable="true" 的时候，由于需要对输入的内容变化进行监听，由于在ie中使用 input、change、propertychange等事件进行监听的时候，无法监听到输入内容的变化，所以这里使用了MutationObserver对象来实现。 使用方式如下： //ie下无法监听输入变化，使用下面的方法监听 // 设置obser...
JavaScript核心之变动观察器（Mutation Observer）
上善若泪
05-03 7825
目录 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 api
細水、長流√的专栏
03-25 304
目录 概述 MutationObserver 构造函数 MutationObserver 的实例方法 observe() disconnect()，takeRecords（） MutationRecord 对象 应用示例 子元素的变动 属性的变动 取代 DOMContentLoaded 事件 参考链接 重要说明：本教程已经搬迁，此处不再维护，请访问新网址：wangdoc.co...
MutationObserver
梦殇的博客
08-12 1643
MutationObserver MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 简单来讲就是使用Mutationboserver可以监听dom节点的属性变化，节点的删除增加等一系列变化 那MutationObserver有啥用呐？ 页面水印的制作 防止水印被用户...
浅谈MutationObserver
m0_45093055的博客
05-27 953
MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。
了解HTML5中的MutationObserver
細水、長流√的专栏
03-25 1277
MutationObserver翻译过来就是变动观察器，字面上就可以理解这是用来观察Node（节点）变化的。MutationObserver是在DOM4规范中定义的，它的前身是MutationEvent事件，该事件最初在DOM2事件规范中介绍，到来了DOM3事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用。 MutationEvent 虽然MutationEvent已经被弃用...
MutationObserver详解
Mr_linjw的专栏
10-26 382
所以 MutationObserver 相比 Mutation events 性能要更高。MutationObserver API 让我们能监听 DOM 树变化，该 API 设计用来替换掉在 DOM 3 事件规范中引入的 Mutation events。比如使用MutationObserver实现图片懒加载，监视img标签的visibilitychange事件，做出响。监听style或者class的变化做出响应，比如我之前的应用：监听antd的模态窗变化，做出后续操作。
一个MutationObserver类似于CSS选择器的API
08-10
它的工作原理是监控指定DOM节点及其子节点，当这些节点发生添加、删除、属性修改等变化时，MutationObserver会捕获这些变化并将其作为MutationRecord对象的集合返回。这个API对于实现响应式Web应用、数据绑定框架或...
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
09-28
Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知，本文给大家分享基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作，感兴趣的朋友参考下
使用Element的InfiniteScroll 无限滚动组件报错的解决
10-15
当尝试使用InfiniteScroll组件时，可能会遇到上述错误，这通常是因为MutationObserver对象在尝试观察一个非Node类型的参数，导致报错。MutationObserver是用来监听DOM树变化的API，而InfiniteScroll组件可能在尝试...
文档对象模型（DOM）
06-19
此外，DOM还与CSSOM（CSS对象模型）结合，实现样式操作，以及与MutationObserver接口配合，监控DOM的变化。 总结起来，DOM是Web开发中的基础工具，它使得开发者能够以结构化的方式理解和操作HTML和XML文档，极大地...
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
yrldjsbk的博客
07-18 319
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1235
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
浏览器的卡顿与react的解决思路
最新发布
weixin_45575944的博客
07-18 263
众所都周知，js是单线程，当react处理vdom相关工作的时候，会阻塞浏览器的渲染过程，阻塞了渲染过程，那么页面就卡着。结合上面所述，1秒60hz，相当于16.67ms至少需要渲染出1张新图，才不会觉的卡顿。我理解这里的卡顿，并不是说优化的怎么怎么好让总工作量少了，处理的快了，而是可能虽然每次渲染出来的新内容少，但是他仍然在生成，而不会在处理过程中一直不变，然后突然渲染出来，这种抖动的、掉帧的渲染方式，容易让人觉的他卡了，而一直在变化，虽然每次变化的不多，但总体是‘流畅的’
中间件的理解
modi000的博客
07-15 332
直接返回，前置服务可以支持更高流量的并发，后置的需要耗时、耗力的，需要IO操作的服务，可以通过MQ慢慢处理。前端写消息的速率比后端处理消息的速率要快很多的。a.快递员角度：快递员无需将快递直接交到用户手里，放在菜鸟驿站即可走了，增加了送快递的数量，提高了送快递的效率；b.用户角度：快递到达的时候在上班，当时无时间取快递，当有了菜鸟驿站后，用户可以在下班闲暇时间去取快递。所以，中间件可以多个可能互相调用的系统耦合程度，提升接口的响应速度，。c.双十一的时候，快递量暴增，快递员不会手忙脚乱、用户可排序取快递。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 564
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 290
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
MutationObserver用法
04-05
MutationObserver是JavaScript的一个API，用于监测DOM树的变化。它可以观察到节点的添加、删除、属性的变化以及文本内容的变化等。MutationObserver有三个参数：回调函数、观察目标和配置对象。 回调函数是当观察目标发生变化时被调用的函数，它接受两个参数：mutations和observer。mutations是一个数组，包含了所有发生变化的MutationRecord对象。observer是MutationObserver对象本身。 观察目标是需要被观察的DOM节点。它可以是任何DOM节点，包括document对象和文档片段。 配置对象是一个可选的参数，用于指定观察目标的哪些属性需要被观察。它有以下属性： 1. childList：观察目标子节点的变化（添加或删除子节点）。 2. attributes：观察目标属性的变化。 3. characterData：观察目标文本节点的内容变化。 4. subtree：是否观察子树中的变化。 下面是一个简单的示例，当观察目标的子节点发生变化时，打印出变化的信息： ``` // 选取需要观察变化的节点 const targetNode = document.getElementById('some-id'); // 创建一个新的MutationObserver对象 const observer = new MutationObserver((mutations, observer) => { console.log(mutations); }); // 配置MutationObserver对象 const config = { childList: true, attributes: true, subtree: true }; // 开始观察变化 observer.observe(targetNode, config); ``` 在上面的例子中，我们选择了一个id为“some-id”的节点作为观察目标，并将MutationObserver对象配置为观察子节点、属性和子树的变化。当观察目标发生变化时，回调函数将被调用，并打印出变化的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北航程序员小陈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值