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

JS_监听dom变化触发，new MutationObserver

news 2025/12/19 2:14:06

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/12/10 15:29:40

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/12/12 1:01:45

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/12/18 23:49:18

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/12/9 1:32:01

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/12/18 15:38:12

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51