前端JavaScript中MutationObserver:监测DOM变化的强大工具

news2024/11/5 8:43:35

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 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的属性、应用场景以及使用示例,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1015885.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

动手学深度学习_个人笔记01_李沐(更新中......)

序言 神经网络——本书中关注的DL模型的前身,被认为是过时的工具。 深度学习在近几年推动了CV、NLP和ASR等领域的快速发展。 关于本书 让DL平易近人,教会概念、背景和代码。 一种结合了代码、数学和HTML的媒介 测试深度学习(DL&#xf…

FL Studio21.1.1.3750中文破解百度网盘下载地址含Crack补丁

FL Studio21.1.1.3750中文破解版是最优秀、最繁荣的数字音频工作站 (DAW) 之一,日新月异。它是一款录音机和编辑器,可让您不惜一切代价制作精美的音乐作品并保存精彩的活动画廊。 为方便用户,FL Studio 21提供三种不同的版本——Fruity 版、…

TrOCR——基于transformer模型的OCR手写文字识别

前期我们使用大量的篇幅介绍了手写数字识别与手写文字识别,当然那里主要使用的是CNN卷积神经网络,利用CNN卷积神经网络来训练文字识别的模型。 这里一旦提到OCR相关的技术,肯定第一个想到的便是CNN卷积神经网络,毕竟CNN卷积神经网络在计算机视觉任务上起到了至关重要的作用…

打造“共富果园” 广东乳源推动茶油全产业链高质量发展

新华网广州9月13日电(李庆招)金秋九月,瓜果飘香,油茶也将迎来采摘期。13日,一场以“中国健康油 茶油新势力”为主题的乳源茶油12221市场体系之产业大会暨供销对接会在广州举行。来自茶油行业的专家、企业家齐聚一堂&am…

Python模块之time中时间戳、时间字符与时间元组之间的相互转换

时间的三种形式 时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。 1694868399 时间格式字符串,字符串形式的时间。 2023-09-16 20:46:39 时间元组(struct_time),包含9个元素。 time.struct_time(tm_year2023, …

2023 IDC 中国未来企业大奖优秀奖公布,神策数据助力中信建投获“未来运营领军者”优秀奖称号...

今日,全球领先的 IT 市场研究和咨询公司 IDC 正式公布 2023 IDC 中国未来企业大奖优秀奖名单,神策数据的合作客户中信建投证券股份有限公司(简称“中信建投”)荣获“未来运营领军者”优秀奖称号。 该奖项是 ICT 领域最具权威的奖项…

直线导轨滑块的固定方式

直线导轨滑块是要安装到导轨上的,利用压力使得滑块固定到导轨上,并调整间隙精度,当机械中有振动或冲击力浸染时,滑块和滑轨很有可能发生松动,从而偏离原来的固定地位,影响运行精度与操作寿命,甚…

RADIUS协议基础原理

RADIUS简介 Radius概述Radius架构(c/s模式)Radius特点Radius报文Radius认证报文Radius计费报文Radius授权报文 Radius工作原理 Radius概述 RADIUS(Remote Authentication Dial-In User Server,远程认证拨号用户服务)是一种分布式的、C/S架构…

Java设计模式-结构性设计模式(外观设计模式)

简介 ⻔⾯模式,隐藏系统的复杂性,并向客户端提供了⼀个客户端可以访问系统的接⼝定义了⼀个⾼层接⼝,这个接⼝使得这系统更加容易使⽤应用场景 xxx是负责消息推送这个⼯作,看起来很轻松,但他们不知道⾥⾯有多复杂&…

Jenkins结合allure生成测试报告

前言: 我们在做自动化测试的过程中最重要的肯定是报告的输出啦,最近几年allure可以说是最最主流报告展示工具啦。 一、服务端安装allure 在安装Jenkins的机器 安装allure,我们在Jenkins上能跑动前提是在对应服务器上代码能正常运行&#xf…

ESP8266使用记录(一)

1、23.7.17从TB买了个8266 2、下载安装Arduino 3、卖家的配套资料,直接覆盖相关文件 4、文件-首选项-设置-编辑器语言-中文(简体) 其他开发板管理器地址 http://arduino.esp8266.com/stable/package_esp8266com_index.json 5、工具-端口-COM6 工具-开发板-esp8266…

直接插入排序(C++实现)

文章目录 1. 基础概念🍑 内部排序和外部排序 2. 直接插入排序3. 动图演示4. 代码实现5. 性能分析 无论是日常生活还是很多科学领域当中,排序都是会经常面对的问题,比如按成绩对学校的学生排序,按薪水多少对公司员工排序等。 根据…

Vue系列之入门篇

前言: 目录 一,关于Vue的简介 1.什么是Vue? 2.使用Vue框架的好处? 3. 库和框架的区别: 4. MVVM的介绍 5.Vue的入门案例 二,Vue的生命周期 一,关于Vue的简介 1.什么是Vue? Vu…

详解混合类型文件(Polyglot文件)的应用生成与检测

1. 引入 混合类型文件(Polyglot文件),是指一个文件,既可以是合法的A类型,也可以是合法的B类型。 比如参考3中的文件,是一个html文件,可以用浏览器正常打开;它也是一个一个.jar文件&…

来看看Javadoc(文档注释)详解

Java 支持 3 种注释,分别是单行注释、多行注释和文档注释。文档注释以/**开头,并以*/结束,可以通过 Javadoc 生成 API 帮助文档,Java 帮助文档主要用来说明类、成员变量和方法的功能。 文档注释只放在类、接口、成员变量、方法之前…

代码随想录算法训练营第53天 | ● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和

文章目录 前言一、1143.最长公共子序列二、1035.不相交的线三、53. 最大子序和总结 前言 动态规划 一、1143.最长公共子序列 确定dp数组(dp table)以及下标的含义 dp[i][j]:长度为[0, i - 1]的字符串text1与长度为[0, j - 1]的字符串text2的…

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

掌握这5种方法,让你的新AirPods充电盒更耐用!

每次AirPods充电盒落地时,你都会呼吸急促吗?无论我使用的是旧一代的AirPods还是最新的AirPod Pro 2,我都关心它们的保存状况,并尽力保护这些脆弱设备的安全。我想我对AirPods Pro 2的新充电盒也会有同样的感受,它在9月…

学校项目培训之Carla仿真平台之安装Carla

官网:http://carla.org/ 写在前面 由于安装都写了很多东西,所以我单独将安装弄出来记录一下。 如果你在安装9.12版本的时候遇到了很多问题,你可以考虑以下几点: - 楼梯可能不太行,需要更换,这是我实践得到的…

英语——记忆篇——谐音法+拼音法

中小学单词: 谐音法: 1.issue n.问题;(杂志、报刊的)一期;v.发行 谐音“一休”;想象聪明的一休很会解决问题,发行了一期杂志专门描述他解决问题的方法; issue 问题&…