前端JavaScript中MutationObserver:监测DOM变化的强大工具
🎬 岸边的风:个人主页
🔥 个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想,就是为了理想的生活 !
目录
引言
1. MutationObserver简介
2. MutationObserver的属性
3. MutationObserver的应用场景
3.1 动态内容加载
3.2 表单验证
3. 响应式布局
3.4 自定义组件开发
4. 使用MutationObserver的示例
4.1 监测元素属性变化
4.2 监测子元素的添加或移除
4.3 监测文本节点的内容变化
5. MutationObserver的浏览器兼容性
6. 总结
引言
在Web开发中,操作和监测DOM元素的变化是一项常见的任务。MutationObserver是JavaScript提供的一个强大的API,用于异步监测DOM树的变化,并在发生变化时执行相应的操作。本文将详细介绍MutationObserver的属性、应用场景以及使用示例,帮助读者充分理解和应用这一强大的工具。
1. MutationObserver简介
MutationObserver是一个JavaScript的API,用于监测DOM树的变化。它提供了一种异步的方式来监听DOM元素的增加、删除、属性变化等操作,以及文本节点的修改。通过MutationObserver,开发者可以实时地捕捉到DOM的变化,并做出相应的响应。
MutationObserver是在2012年引入的,目前被广泛支持的浏览器(包括Chrome、Firefox、Safari、Edge等)都提供了对MutationObserver的支持。
2. MutationObserver的属性
MutationObserver提供了一些属性,用于配置和控制观察器的行为。下面是一些常用的属性:
- attributes:是否监测元素的属性变化。
- attributeOldValue:是否在属性变化时记录旧值。
- attributeFilter:指定要监测的属性列表。
- childList:是否监测子元素的添加或移除。
- subtree:是否监测后代元素的变化。
- characterData:是否监测文本节点的内容变化。
- characterDataOldValue:是否在文本节点内容变化时记录旧值。
通过这些属性,可以灵活地配置MutationObserver的观察行为,以满足不同的需求。
3. MutationObserver的应用场景
MutationObserver在许多场景下都能发挥重要作用。下面是一些常见的应用场景:
3.1 动态内容加载
当页面中的内容是通过异步加载或动态生成时,可以使用MutationObserver来监测内容的变化,并在变化发生后进行相应的处理,如更新页面布局、添加事件监听器等。例如,在无限滚动加载的场景中,当新的内容被加载到页面时,可以使用MutationObserver来自动监听内容的变化,并在变化发生后动态添加相应的元素或事件。
3.2 表单验证
当需要实时验证用户输入时,可以使用MutationObserver来监测表单元素的变化,以及对应的属性变化,如值的变化、禁用状态的变化等。这样可以及时地对用户的输入进行验证和反馈。例如,在一个表单中,当用户输入时,可以使用MutationObserver来监测输入框的值变化,并在值变化后进行实时的表单验证。
3. 响应式布局
当页面布局需要根据DOM变化自适应调整时,可以使用MutationObserver来监测相关元素的变化,并根据变化动态地调整页面布局。例如,在响应式网页设计中,当窗口大小发生变化或元素被添加或移除时,可以使用MutationObserver来监听相关元素的变化,并根据变化重新计算和调整页面布局,以适应不同的设备和屏幕尺寸。
3.4 自定义组件开发
在自定义组件的开发中,MutationObserver可以用于监听组件内部的DOM变化,以及对应的属性变化。这样可以在组件内部做出相应的处理,如更新组件的状态、重新渲染组件等。例如,当一个自定义组件中的某个子元素被添加或移除时,可以使用MutationObserver来监听这些变化,并在变化发生后更新组件的状态或重新渲染组件。
4. 使用MutationObserver的示例
下面通过几个示例来演示如何使用MutationObserver进行DOM变化的监测。
4.1 监测元素属性变化
下面的示例代码演示了如何使用MutationObserver监测元素的属性变化,并在变化发生后进行相应的处理:
// 目标元素
const targetElement = document.querySelector('#target');// 创建一个MutationObserver实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'attributes') {console.log(`属性 ${mutation.attributeName} 发生变化`);// 执行相应的处理逻辑}});
});// 配置观察器
const config = {attributes: true,
};// 启动观察器
observer.observe(targetElement, config);
在上述代码中,我们首先选择了一个目标元素,然后创建了一个MutationObserver实例。接下来,我们配置了观察器,指定我们要监测的变化类型为属性变化。最后,我们通过调用observe
方法,将观察器绑定到目标元素上。
当目标元素的属性发生变化时,MutationObserver的回调函数将被调用,并传递一个mutations
参数,该参数包含了所有发生的变化。在回调函数中,我们可以根据变化的类型(mutation.type
)来判断具体的变化类型,并执行相应的处理逻辑。
4.2 监测子元素的添加或移除
下面的示例代码演示了如何使用MutationObserver监测子元素的添加或移除,并在变化发生后进行相应的处理:
// 目标元素
const targetElement = document.querySelector('#target');// 创建一个MutationObserver实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'childList') {mutation.addedNodes.forEach((addedNode) => {console.log(`添加了子元素:${addedNode.nodeName}`);// 执行相应的处理逻辑});mutation.removedNodes.forEach((removedNode) => {console.log(`移除了子元素:${removedNode.nodeName}`);// 执行相应的处理逻辑});}});
});// 配置观察器
const config = {childList: true,
};// 启动观察器
observer.observe(targetElement, config);
在上述代码中,我们创建了一个MutationObserver实例,并将观察器配置为监测子元素的添加或移除。当目标元素的子元素发生添加或移除操作时,MutationObserver的回调函数将被调用,并传递一个mutations
参数,该参数包含了所有发生的变化。在回调函数中,我们可以根据变化的类型(mutation.type
)为childList
来判断子元素的添加或移除操作,并执行相应的处理逻辑。
4.3 监测文本节点的内容变化
下面的示例代码演示了如何使用MutationObserver监测文本节点的内容变化,并在变化发生后进行相应的处理:
// 目标元素
const targetElement = document.querySelector('#target');// 创建一个MutationObserver实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'characterData') {console.log(`文本节点内容发生变化:${mutation.target.nodeValue}`);// 执行相应的处理逻辑}});
});// 配置观察器
const config = {characterData: true,
};// 启动观察器
observer.observe(targetElement, config);
在上述代码中,我们创建了一个MutationObserver实例,并将观察器配置为监测文本节点的内容变化。当目标元素的文本节点的内容发生变化时,MutationObserver的回调函数将被调用,并传递一个mutations
参数,该参数包含了所有发生的变化。在回调函数中,我们可以根据变化的类型(mutation.type
)为characterData
来判断文本节点的内容变化,并执行相应的处理逻辑。
5. MutationObserver的浏览器兼容性
MutationObserver已经在大多数现代浏览器中得到支持,包括Chrome、Firefox、Safari、Edge等。然而,考虑到一些老旧的浏览器版本,建议在使用MutationObserver之前,检查浏览器的兼容性。
可以通过以下链接查看MutationObserver的浏览器兼容性信息:
- Can I use MutationObserver?open in new window
6. 总结
MutationObserver是一个强大的工具,用于监测DOM树的变化。通过MutationObserver,我们可以异步地监听DOM元素的增加、删除、属性变化等操作,并在发生变化时执行相应的操作。它在动态内容加载、表单验证、响应式布局、自定义组件开发等场景下发挥重要作用。本文介绍了MutationObserver的属性、应用场景以及使用示例,
相关文章:

前端JavaScript中MutationObserver:监测DOM变化的强大工具
🎬 岸边的风:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 引言 1. MutationObserver简介 2. MutationObserver的属性 3. MutationObserver的应用场景 3.1 动态内容加载 …...

28335 GPIO作为输入的配置记录
28335 GPIO配置为输入,可以启动输入滤波功能,看了网上很多的讲解,把滤波配置记录一下: 主要是配置两个参数: GpioCtrlRegs.GPXCTRL.bit.QUALPRDX :用于配置采样的周期,由配置值和SYSCLKOUT共同…...

js脚本解决markdown本地图片->图床问题,附源代码和编译后的exe
前提条件 安装picgo-core,安装步骤: npm install -g picgo -g 然后配置图床 picgo set uploader ? Choose a(n) uploader (Use arrow keys)smms ❯ tcyungithubqiniuimguraliyunupyun (Move up and down to reveal more choices) 配置好后便可使用项目 快速开始-获取项目…...
C#不通过byte[],直接对内存映射文件复制内存
背景 多个进程直接需要传递大量图片,所以对性能要求较高。支付复制内存显然比转成byte[]再复制优越。 命名空间 using System; using System.Diagnostics; using System.Runtime.InteropServices; 代码 public CMainTestForm() { InitializeCo…...
ELK之Logstash启动异常:Logstash could not be started because there is already...
Logstash启动异常: Logstash could not be started because there is already another instance using the configured data directory. If you wish to run multiple instances, you must change the "path.data" setting. 提示我们已经有一个实例在用da…...

Matlab Simulink支持system generator插件
文章目录 前言一、System Generator 简介二、System Generator 特性三、System Generator 安装1、确定是否已安装 System Generator 工具2、vivado 卸载3、vivado 安装 四、解决版本不兼容问题五、使用 System Generator 前言 目前有在 Simulink 中开发完成后将其转换成 Veril…...
redis设计规范
部分内容参考:阿里redis开发规范 同时,结合shigen在实习中的实践经验总结。 key的名称设计 可读性和管理性 业务名: 表名: id pro:user:1001简洁性 控制key的长度,可以用缩写 transaction -> tras拒绝bigkey 防止网卡流量、慢查询&…...

用于非线性多载波卫星信道的多输入多输出符号速率信号数字预失真器DPD(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
【Spark】用udf和withColumn在dafaframe中创建新列
udf使用 import org.apache.spark.sql.functions.udf udf接收一个函数(func)作为参数,返回一个UserDefinedFunction。 UserDefinedFunction接收列(Column)作为参数,并返回Column. func可以接收普通类型参数…...

AIGC 设计能替代真正的设计师设计吗?
AIGC 设计能替代真正的设计师设计吗? 目录 一、写在前面的话 二、AIGC 设计能替代真正的设计师吗? 1.1、传统设计师设计 1.2、AIGC设计 1.3、相关概念 1.4、观点分析 (1)、审美角度 (2)、版权角度 …...

【1++的C++进阶】之emplace详解
👍作者主页:进击的1 🤩 专栏链接:【1的C进阶】 在前面C11系列的文章里,我们漏掉了几个知识点,这篇文章对其中一个知识点进行讲解,关于剩余的知识点的文章在后面会相继出炉。 C11中,针…...

React入门
一、react开始 1、react是什么 用于构建用户界面的JavaScript库 操作DOM呈现页面 (发送请求获取数据和处理数据不由react处理)fessbook开发 2、为什么要学 原生js操作DOM繁琐、效率低 使用原生js直接操作DOM,浏览器会进行大量重绘重排 原…...
第三方登录以及验证
第三方登录是指用户可以通过使用已有的第三方账号进行登录,而无需再次注册新的账号。常见的第三方登录平台包括微信、QQ、微博、GitHub等。 验证是指系统需要验证用户提供的信息是否正确,以确保用户可以登录系统。验证方式包括密码验证、手机号验证、邮…...

MS SQL Server问题汇总
1.报SQL Server Agent连接不上的错误 15:38:57.991 [debezium-sqlserverconnector-sqlserver_transaction_log_source-change-event-source-coordinator] WARN i.d.connector.sqlserver.SqlServerStreamingChangeEventSource - No maximum LSN recorded in the database; pl…...

在线海报图片设计器、图片编辑器源码/仿照稿定设计源码
在线海报设计系统素材设计源码是一个漂亮且功能强大的在线海报图片设计器,仿照稿定设计而成。该系统适用于多种场景,包括海报图片生成、电商分享图、文章长图、视频/公众号封面等。用户无需下载软件,即可轻松实现创意,迅速完成排版…...

KMP算法(C++)
KMP算法与BF算法不一样的在于,当主串与子串不匹配时,主串不回溯,选择了子串回溯,大大提高了运算效率。 借用了next1【】数组,让子串回溯。get_next函数求next1【】数组,get_next函数的实现难点在于下列几行…...

C++的异常类型与多级catch匹配
try-catch 的用法: try{// 可能抛出异常的语句 }catch(exceptionType variable){// 处理异常的语句 } 我们还遗留下一个问题,就是 catch 关键字后边的exceptionType variable,这节就来详细分析一下。exceptionType是异常类型,它指明了当前的 catch 可以处理什么类型的异常…...

查询IP地址可得到哪些信息
通过IP地址定位,可以获取一些基本的信息,包括以下内容: 1. 地理位置:你可以确定IP地址所在的地理位置,包括国家、州或省、城市和地理坐标。这通常是通过将IP地址与地理位置数据库进行匹配来实现的。 2. ISPÿ…...

考研算法47天:01背包
问题描述 算法详细步骤 代码随想录 (programmercarl.com) ac代码 #include <iostream> using namespace std; int bag[1001]; int bagMax[1001]; int bagvalue[1001]; int main(){int n,v;cin>>n>>v;for(int i0;i<n;i){cin>>bag[i]>>bagva…...

Docker实战技巧(一):Kubernetes基础操作实战
Kubernetes定位在Saas层,重点解决了微服务大规模部署时的服务编排问题 1、关闭防火墙并设置开机禁用 systemctl stop firewalld systemctl disable firewalld 2、配置repo cd /etc/yum.repos.d/ 下载Docker repo wget https://mirrors.aliyun.com/docker-…...

【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...

大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块,用于对本地知识库系统中的知识库进行增删改查(CRUD)操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...

elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...