使用MutationObser来监测DOM变动

最新推荐文章于 2024-08-08 22:51:45 发布
最新推荐文章于 2024-08-08 22:51:45 发布
阅读量620 收藏 1
点赞数
分类专栏： 原创 文章标签： MutationObserve WEBAPI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_zsdf/article/details/79772892
版权
MutationObserver是DOM4中用于监听DOM变化的API，本文详细介绍了如何使用MutationObserver来观测DOM节点的文本、属性等变化，通过实例展示了如何记录变化前的状态，包括旧值(oldValue)的获取。此外，还探讨了如何针对特定属性如class进行观察，并提醒注意不同type下oldValue的返回值差异。
摘要由CSDN通过智能技术生成

有时候我们需要获取一个Dom节点未发生变化前的所有相关信息，那么就需要有一个函数去监听它变化前的所有状态，这里要讲的就是MutationObserve，该构造函数出现在DOM4中，是为了替换在DOM3事件规范中引入的Mutation事件.
首先该构造函数创建实例，并且接受一个回调函数，该回调函数含有一个参数MutationRecord，其实就是为了记录有多少个节点发生了变化
MutationRecord有以下几个属性：

这里写图片描述

在MutationObserve构造函数创建了实例之后就是怎样去使用了。
实例有一个observe方法，接受两个参数，一个是要监听的节点，第二个参数是MutationObserverInit，就是用来配置观察者行为的一个对象，该对象含有以下属性
这里写图片描述

接下来就是实战了，我们打印一个节点文本变化前的值，即oldValue
首先定义一段html，监听其中text的变化

<a id = "pp">aaa</a
最低0.47元/天 解锁文章
画一生情入颜容
关注
专栏目录
【CASS精品教程】020：cass3d基于DOM和DEM生成倾斜三维模型
「 刘一哥与GIS的故事」
11-11 4788
本文讲解 cass3d基于pix4d生成的正射影像DOM和DSM生成倾斜三维模型，并进行三维测图。
dom更新监听之 --- Mutation Observer API
xiao_shutong的博客
06-26 1572
1. 概述 2. MutationObserver 构造函数 3. MutationObserver 的实例方法 3.1 observe() 3.2 disconnect()，takeRecords（） 4. MutationRecord 对象 5. 应用示例 5.1 子元素的变动 5.2 属性的变动 5.3 取代 DOMContentLoaded 事件 6. 参考链接 ...
JavaScript核心之变动观察器（Mutation Observer）
上善若泪
05-03 8065
目录 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...
“Mutation Observer：让DOM变化尽在掌握
最新发布
zayyo的博客
08-08 866
MutationObserver固然好用，但是其也存在缺点。首先是性能损耗虽然在MutationEvent的基础上优化了许多，但是监听body的操作对性能影响还是非常大的，一切用户操作可能都会使函数频繁的回调。解决方案：尽量限制监听范围，只监听必要的节点，或限制监听的变化类型，以减小回调的频率。其次是操作冲突由于回调函数非唯一性，如果两个观察者监听变化后的操作有依赖关系可能会造成错误或者冲突解决方案：我们可以采用锁的机制，确保在满足特定条件时才能执行相关操作，以避免冲突和错误。
H5新特性MutationObser监听标签中属性的改变或者标签的添加删除事件
huanloveqiang的博客
08-25 678
H5新特性MutationObser监听标签中属性的改变或者标签的添加删除事件MutationObserobserve方法disconnect方法takeRecords方法MutationRecord对象`下面为示例：`总结 MutationObser Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。 observe方法 MutationObserver使用observe方法进行监听指定的元素节点变化，observe方法接受两个参数：obse
MutationObserve的使用和应用
赵天铭的博客
11-23 3464
MutationObserve的使用和应用 前言 最近接到一个项目需求，就是把另一个项目嵌入到当前项目中。要求很简单，让人看不出这是嵌入过来的。 本来觉得这也没什么，因为以前也做过一次。 方案无非就是通过iframe嵌入，通过postMessage进行通信（ps:两个项目都是我们自己的，可以修改代码）。 其他的一切都ok，就有个一个问题困扰了。 我们当前的项目是一个典型的圣杯布局，头部和底部都要显...
【译】DOM MutationObserver，在不影响浏览器性能的情况下响应DOM更改。
weixin_44138611的博客
07-06 1916
DOM MutationObserver，在不影响浏览器性能的情况下响应DOM更改。 Dom Mutation Events 在提出时的确是一个很不错的想法, 随着web页面的动态性不断增强，web开发者非常欢迎这种能够侦听DOM中的更改并对其作出反应的事件，然而在实践中，DOM Mutation Events存在着严重的性能和稳定性问题，所以此方法已被弃用多年。 然而，DOM Mutation ...
使用Mutation Observer监听DOM变化（也许是最完全指南？）
百岁如流富贵冷灰的博客
12-07 4227
前言 打开自己的博客，猛然发现自己已经有快两个月没有更新了，一方面是因为确实没有遇到什么特别值得记录的问题及知识点，另一方面则是所在部门的组织架构调整，唉（????）日子难过啊，没啥心情更新。 正题 众所周知，我们监听input值得变化，我们可以通过绑定事件来实现。但是对于DOM元素的属性、数据的变化我们应该如何监听呢。 这个时候就需要用到我们今天的主角了：MutationObserver，它提供了监视对DOM树所做更改的能力。目前可以监听DOM节点的属性、CharacterData以及子元素的变化。 介绍
使用Dom4j解析XML
热门推荐
redarmychen的专栏
10-23 34万+
dom4j是一个Java的XML API，类似于jdom，用来读写XML文件的。dom4j是一个非常非常优秀的Java XML API，具有性能优异、功能强大和极端易用使用的特点，同时它也是一个开放源代码的软件，可以在SourceForge上找到它. 对主流的Java XML API进行的性能、功能和易用性的评测，dom4j无论在那个方面都是非常出色的。如今你可以看到越来越多的Ja
【ArcGIS模型构建器】06：ArcGIS中DOM批量分幅教程
「 刘一哥与GIS的故事」
11-02 1635
ArcGIS中利用模型构建器实现DOM批量分幅裁剪。
读取注册表监控当前操作系统已安装的软件变化
09-23
定时读取注册表监控当前操作系统已安装的软件变化，使用C#
JavaScript DOM 变动观察器（Mutation observer）
爱蹦跶的全栈大A阿
02-12 1764
DOM 变动观察是 web 开发中的一个重要概念，指的是监视 DOM 元素的变化。传统的 DOM 事件可以用于响应某些特定的 DOM 变动，例如点击、鼠标移入移出等。然而，这些事件无法满足所有场景的需求，例如无法监视 DOM 元素的添加、删除、修改等操作。是浏览器提供的一个 API，用于解决 DOM 变动观察问题。它可以监视 DOM 树的任何部分，包括子元素、属性和文本内容，并在发生变化时触发回调函数。理解 MutationObserver的工作原理和应用场景，对于开发人员来说至关重要。
在vue3中如何监听dom元素，并对子元素进行操作
xiaomaerc的博客
05-10 1155
【代码】在vue3中如何监听dom元素，并对子元素进行操作。
【JavaScript 教程】DOM——Mutation Observer API
油墨香^-^的博客
06-16 481
作者 | 阮一峰 概述 Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才
你不知道的 DOM 变动观察器：Mutation observer
LeviDing的博客
01-05 475
DOM 变动观察器（Mutation observer）MutationObserver 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。我们将首先看一下语法，然后探究一...
H5新特性MutationObser报错Failed to execute 'observe' on 'MutationObserver解决
前端一线搬运工的博客
09-12 2万+
控制台报错:Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. 意味着执行需要的是节点(dom元素),不是jq的方法,所以请使用js获取元素; 如下 var targetNode = document.querySelector...
javascript学习之Mutation Observer API
白话机器学习
08-04 79
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值