当前位置： 首页 > news >正文

JS_监听dom变化触发，new MutationObserver

news 2026/3/27 2:27:50

MutationObserver 是一个用于监测 DOM 变化的接口，它提供了一种机制来异步观察在特定元素或文档中发生的 DOM 变化。
MutationObserver 的作用包括：

1.监测 DOM 变化：你可以创建一个 MutationObserver 实例，并指定一个回调函数。当指定的元素或文档中的 DOM 发生变化时，回调函数会被触发。

2.捕获变化类型：MutationObserver 可以捕获多种类型的 DOM 变化，包括添加或删除节点、属性变化、文本内容变化等等。通过配置 MutationObserver 的监听选项，你可以选择监测的变化类型。

3.异步处理变化：MutationObserver 使用异步机制来处理 DOM 变化，这意味着当变化发生时，不会立即触发回调函数，而是在当前 JavaScript 执行完成后才会执行回调函数。这有助于避免在变化发生时立即执行处理逻辑，从而提高性能和避免不必要的重复操作。

4.跨元素监测：你可以选择监测单个元素的变化，也可以监测整个文档或文档片段的变化。通过设置 MutationObserver 的目标节点，你可以指定要监测变化的范围。

通过使用 MutationObserver，你可以在 DOM 发生变化时执行自定义的操作，例如更新页面、触发其他事件或执行特定的逻辑。它在实现一些动态的、基于 DOM 变化的功能时非常有用，比如实时监测聊天消息、自动保存表单数据、实时更新数据等。

childList: 布尔值，表示是否监测子节点的添加或移除操作。
subtree: 布尔值，表示是否递归监测子节点的变化。如果设置为 true，则会监测目标节点及其所有后代节点的变化。
attributes: 布尔值，表示是否监测属性的变化。
attributeOldValue: 布尔值，表示是否在记录属性变化时存储旧值。
attributeFilter: 数组，用于指定要监测的属性名称。只有在指定的属性发生变化时，才会触发回调函数。如果未指定，则监测所有属性的变化。
characterData: 布尔值，表示是否监测文本节点的内容变化。
characterDataOldValue: 布尔值，表示是否在记录文本节点内容变化时存储旧值。

function onObserve(targetSelector, resolve) {// 目标元素的选择器 targetSelector// 创建 MutationObserver 实例const observer = new MutationObserver((mutationsList) => {const targetElement = document.querySelector(targetSelector);if (targetElement) {resolve && resolve()}});// 配置 MutationObserver 监听选项const config = {childList: true,subtree: true};// 监听整个文档的变化// document.documentElement文档对象的根节点，也就是 <html> 元素   可替换为需要监控的节点observer.observe(document.documentElement, config);
}onObserve('.aaaa .bbbb #ccc', ()=>{console.log('出现元素.aaaa .bbbb #ccc');
})

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

相关文章：

JS_监听dom变化触发，new MutationObserver

MutationObserver 是一个用于监测 DOM 变化的接口&#xff0c;它提供了一种机制来异步观察在特定元素或文档中发生的 DOM 变化。 MutationObserver 的作用包括&#xff1a; 1.监测 DOM 变化&#xff1a;你可以创建一个 MutationObserver 实例&#xff0c;并指定一个回调函数。…...

编程日记 2024/5/9 3:13:36

什么是驱动数字签名？如何获取驱动数字签名？

Windows 驱动程序承载着计算机实现的各种内核和用户模式功能。如果驱动程序被黑客攻击&#xff0c;可能会产生很多问题。Windows通过数字签名来验证驱动程序包的完整性及发布者的身份。2020年10月的安全更新中&#xff0c;微软加强了对驱动软件的验证&#xff0c;如果Windows无…...

编程日记 2024/5/9 3:12:35

【leetcode】优先队列题目总结

优先队列的底层是最大堆或最小堆 priority_queue<Type, Container, Functional>; Type是要存放的数据类型Container是实现底层堆的容器&#xff0c;必须是数组实现的容器&#xff0c;如vector、dequeFunctional是比较方式/比较函数/优先级 priority_queue<Type>…...

编程日记 2024/5/9 3:10:32

typescript 中的泛型

泛型&#xff1a;解决 类、接口、方法的复用性、以及对不特定数据类型的支持 传入的参数与返回参数类型一致 泛型函数 // T表示泛型&#xff0c;具体什么类型是调用这个方法的时候决定的 function getData<T>(value: T): T {return value } getData<number>(123) …...

编程日记 2024/5/9 3:09:31

计算方法实验2（补充）：列主元消元法解线性方程组

C源代码 #include<bits/stdc.h> using namespace std;// 列主元消去法求解线性方程组 vector<long double> Column_Elimination(vector<vector<long double>> A, vector<long double> b);int main() {vector<vector<long double>> …...

编程日记 2024/5/9 3:06:28

Qt扫盲-Qt D-Bus概述

Qt D-Bus概述 一、概述二、总线三、相关概念1. 消息2. 服务名称3. 对象的路径4. 接口5. 备忘单 四、调试五、使用Qt D-Bus 适配器1. 在 D-Bus 适配器中声明槽函数1. 异步槽2. 只输入槽3. 输入输出槽4. 自动回复5. 延迟回复 一、概述 D-Bus是一种进程间通信(IPC)和远程过程调用…...

编程日记 2024/5/9 2:59:18

懒洋洋作业讲解

懒洋洋作业讲解 环境配置 1.软件下载&#xff1a;DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架 2.软件介绍 HBuilder是由DCloud&#xff08;数字天堂&#xff09;推出的一款面向HTML5的Web开发…...

编程日记 2024/5/9 2:58:17

vue3 + ts实现canvas绘制的waterfall

实际运行效果&#xff08;仅包含waterfall图表部分&#xff09; component.vue <template><div ref"heatmap" :style"{ height: props.containerHeight px }" /> </template><script setup> import ColorMap from "color…...

编程日记 2024/5/9 2:57:16

代码随想录算法训练营第四十四天

sad的一天&#xff0c;明天开始上班&#xff0c;而且娃还行&#xff0c;媳妇儿状态不稳定&#xff0c;太难了也&#xff01;&#xff01;&#xff01; 完全背包 #include<vector> #include<iostream> using namespace::std; int main(){int N;//种类int V;//空间ci…...

编程日记 2024/5/9 2:56:14

【3dmax笔记】027：配置修改器集、工具栏自定义与加载

文章目录 一、配置修改器集二、自定义工具栏三、加载工具栏 一、配置修改器集 可以把自己常用的修改命令放到右边框中的部分&#xff0c;便于自己的操作&#xff0c;省去了每次都要花半天时间找命令的尴尬。新建一个二维或者三维物体&#xff0c;点击修改面板&#xff0c;点击…...

编程日记 2024/5/9 2:55:13

Reactor模型详解

目录 1.概述 2.Single Reactor 3.muduo库的Multiple Reactors模型如下 1.概述 维基百科对Reactor模型的解释 The reactor design pattern is an event handling pattern for handling service requests delivered concurrently to a service handler by one or more inputs.…...

编程日记 2024/5/9 2:52:10

内存卡罢工，数据危机？别急，有救！

在日常生活和工作中&#xff0c;我们越来越依赖于各种电子设备来存储重要数据。其中&#xff0c;内存卡因其便携性和大容量而广受欢迎。然而&#xff0c;当内存卡突然损坏打不开时&#xff0c;我们该如何应对&#xff1f;本文将为您详细解析这一问题&#xff0c;并提供有效的解…...

编程日记 2024/5/9 2:51:09

python爬虫实战

import requests import json yesinput(输入页数&#xff1a;) yesint(yes)headers {"accept": "application/json, text/plain, */*","accept-language": "zh-CN,zh;q0.9","content-type": "application/json",…...

编程日记 2024/5/9 2:50:07

k8s 资源文件参数介绍

Kubernetes资源文件yaml参数介绍 yaml 介绍 yaml 是一个类似 XML、JSON 的标记性语言。它强调以数据为中心&#xff0c;并不是以标识语言为重点例如 SpringBoot 的配置文件 application.yml 也是一个 yaml 格式的文件 语法格式 通过缩进表示层级关系不能使用tab进行缩进&am…...

编程日记 2024/5/9 2:48:06

mac系统安装steam报错-解决办法

今天给虚拟机装了个苹果系统&#xff0c;然后想装个steam&#xff0c;从steam的官方下载安装steam_osx.dmg时&#xff0c;总是报“steam_osx已损坏&#xff0c;无法打开&#xff0c;请移动到废纸篓“。搜了一下找到了解决办法&#xff0c;这里记录一下。 双击steam_osx.dmg时&…...

编程日记 2024/5/9 2:47:04

这个簇状柱形图怎么添加百分比？

这个图表是excel默认的图表配色&#xff0c;有的人做出来都那个百分比&#xff0c;一起来做一个这样的图表。 1.插入图表 选中数据区域&#xff0c;点击 插入选项卡&#xff0c;在图表那一栏&#xff0c;点一下柱形图右侧那个倒三角&#xff0c;在弹邮对话框中&#xff0c;选…...

编程日记 2024/5/9 2:44:01

Tomact安装配置及使用(超详细)

文章目录 web相关知识概述web简介(了解)软件架构模式(掌握)BS&#xff1a;browser server 浏览器服务器CS&#xff1a;client server 客户端服务器 B/S和C/S通信模式特点(重要)web资源(理解)资源分类 URL请求路径(理解)作用介绍格式浏览器通过url访问服务器的过程 服务器(掌握)…...

编程日记 2024/5/9 2:41:58

web后端——netbeans ide +jsp+servlet开发学习总结

目录 jsp基础 netbeans开发工具问题HTTP Status 405 - HTTP method POST is not supported......netbeans 提示无法启动GlassFish Server 4.1.1:服务器未运行时, HTTP 或 HTTPS 监听程序端口已被占用404 问题netbeans中项目中有多个html文件,如何单独运行某个文件&#xff1f;n…...

编程日记 2024/5/9 2:38:55

使用request-try-notifyState流程实现UI控制与状态反馈的完整闭环

1. 前言 在Qt编程时&#xff0c;我们经常会在界面上添加一些按钮&#xff0c;当按钮被点击时&#xff0c;执行某段代码&#xff0c;例如显示一个对话框、关闭窗口&#xff0c;保存文件等等。 这种由UI控件触发某种信号&#xff0c;通过信号槽触发目的代码执行的场景非常多。这…...

编程日记 2024/5/9 2:37:54

屏蔽罩材质和厚度对屏蔽效能的影响

​ 一&#xff0e;屏蔽效能的影响因素 屏蔽效能的影响因素主要有两个方面&#xff1a;屏蔽材料的特性和厚度&#xff1b;如下图所示&#xff0c;电磁波经过不同媒介时&#xff0c;会在分界面形成反射&#xff0c;穿过界面的电磁波一部分被反射回去&#xff0c;这部分能量损失…...

编程日记 2024/5/9 2:36:53

为什么顶尖量化团队已弃用Pandas清洗？Polars 2.0零拷贝字符串正则+Unicode归一化实战（附GitHub千星Benchmark）

第一章&#xff1a;Polars 2.0 大规模数据清洗技巧 2026 最新趋势 Polars 2.0 在 2026 年已全面支持零拷贝流式清洗、原生 Delta Lake 元数据感知与分布式列式校验&#xff0c;成为金融、遥感与实时日志场景中替代 Pandas 的首选引擎。其核心突破在于 LazyFrame 的智能物化策略…...

编程新知 2026/3/27 2:14:41

二分查找/二分答案

0.前言二分算法&#xff08;Binary Search&#xff09;&#xff0c;也叫折半查找&#xff0c;是一种在有序数据集合中高效查找目标值的算法。它通过不断将查找范围缩小一半&#xff0c;快速定位目标&#xff0c;时间复杂度为 O(logn)&#xff0c;远优于线性查找的 O(n)。1.原理…...

编程新知 2026/3/27 1:20:15

开源工具Jellyfin豆瓣插件高效配置指南：打造完美中文媒体库

开源工具Jellyfin豆瓣插件高效配置指南&#xff1a;打造完美中文媒体库 【免费下载链接】jellyfin-plugin-douban Douban metadata provider for Jellyfin 项目地址: https://gitcode.com/gh_mirrors/je/jellyfin-plugin-douban 在数字媒体收藏日益增长的今天&#xff0…...

编程新知 2026/3/27 0:49:39

OpenClaw智能截图：nanobot自动识别图片中的文字信息

OpenClaw智能截图&#xff1a;nanobot自动识别图片中的文字信息 1. 为什么需要智能截图工具 在日常工作和学习中&#xff0c;我们经常遇到需要从图片中提取文字的场景。比如截取网页上的技术文档片段、保存会议白板上的讨论要点、或者整理纸质书籍中的关键段落。传统做法是手…...

编程新知 2026/3/27 0:39:34

OpenClaw终端增强：Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF实现命令行智能补全与解释

OpenClaw终端增强&#xff1a;Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF实现命令行智能补全与解释 1. 为什么需要智能终端助手 作为每天与终端打交道的开发者&#xff0c;我经常陷入这样的困境&#xff1a;面对复杂的docker compose命令需要反复查阅文档&#xf…...

编程新知 2026/3/27 0:35:31

Maxwell16.0实战：如何用实验电流数据搞定电机仿真（附.tab文件制作技巧）

Maxwell16.0实战&#xff1a;实验电流数据驱动电机仿真的全流程解析 电机仿真作为现代工业设计的重要环节&#xff0c;其准确性直接影响产品性能评估。而将实测电流数据融入仿真流程&#xff0c;往往是工程师突破"理想模型"局限的关键一步。本文将系统性地拆解从实验…...

编程新知 2026/3/26 22:08:05

5步打造Android Studio中文界面配置：从基础设置到效率倍增的本地化环境方案

5步打造Android Studio中文界面配置&#xff1a;从基础设置到效率倍增的本地化环境方案 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack…...

编程新知 2026/3/26 21:32:00

如何让Windows任务栏焕然一新？TranslucentTB给你答案

如何让Windows任务栏焕然一新&#xff1f;TranslucentTB给你答案 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 您是否曾对Windows系统一…...

编程新知 2026/3/26 20:41:48

CTP行情接口避坑指南：从‘不合法的登录’到稳定接收tick数据的5个关键步骤

CTP行情接口实战避坑手册&#xff1a;从登录异常到稳定接收tick的深度解决方案 当你在深夜调试CTP行情接口时&#xff0c;突然看到控制台跳出"不合法的登录"错误提示&#xff0c;而距离第二天开盘只剩3小时——这种场景恐怕不少量化开发者都经历过。本文将分享5个关键…...

编程新知 2026/3/26 20:31:46

ai辅助c语言开发：让快马智能生成复杂格式文件读写代码

最近在开发一个C语言程序时需要处理自定义数据包格式&#xff0c;正好体验了用AI辅助开发的便捷。这个数据包格式包含包头标识、包体长度和JSON格式的包体数据&#xff0c;需要实现读写功能。下面分享我的实现过程和AI辅助开发的实用技巧。 数据包结构分析 首先明确数据包由三部…...

编程新知 2026/3/26 19:31:19