JS_监听dom变化触发，new MutationObserver
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 变化的接口，它提供了一种机制来异步观察在特定元素或文档中发生的 DOM 变化。 MutationObserver 的作用包括： 1.监测 DOM 变化：你可以创建一个 MutationObserver 实例，并指定一个回调函数。…...
什么是驱动数字签名？如何获取驱动数字签名？
Windows 驱动程序承载着计算机实现的各种内核和用户模式功能。如果驱动程序被黑客攻击，可能会产生很多问题。Windows通过数字签名来验证驱动程序包的完整性及发布者的身份。2020年10月的安全更新中，微软加强了对驱动软件的验证，如果Windows无…...
【leetcode】优先队列题目总结
优先队列的底层是最大堆或最小堆 priority_queue<Type, Container, Functional>; Type是要存放的数据类型Container是实现底层堆的容器，必须是数组实现的容器，如vector、dequeFunctional是比较方式/比较函数/优先级 priority_queue<Type>…...
typescript 中的泛型
泛型：解决 类、接口、方法的复用性、以及对不特定数据类型的支持 传入的参数与返回参数类型一致 泛型函数 // T表示泛型，具体什么类型是调用这个方法的时候决定的 function getData<T>(value: T): T {return value } getData<number>(123) …...
计算方法实验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>> …...
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)和远程过程调用…...
懒洋洋作业讲解
懒洋洋作业讲解 环境配置 1.软件下载：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架 2.软件介绍 HBuilder是由DCloud（数字天堂）推出的一款面向HTML5的Web开发…...
vue3 + ts实现canvas绘制的waterfall
实际运行效果（仅包含waterfall图表部分） component.vue <template><div ref"heatmap" :style"{ height: props.containerHeight px }" /> </template><script setup> import ColorMap from "color…...
代码随想录算法训练营第四十四天
sad的一天，明天开始上班，而且娃还行，媳妇儿状态不稳定，太难了也！！！ 完全背包 #include<vector> #include<iostream> using namespace::std; int main(){int N;//种类int V;//空间ci…...
【3dmax笔记】027：配置修改器集、工具栏自定义与加载
文章目录 一、配置修改器集二、自定义工具栏三、加载工具栏 一、配置修改器集 可以把自己常用的修改命令放到右边框中的部分，便于自己的操作，省去了每次都要花半天时间找命令的尴尬。新建一个二维或者三维物体，点击修改面板，点击…...
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.…...
内存卡罢工，数据危机？别急，有救！
在日常生活和工作中，我们越来越依赖于各种电子设备来存储重要数据。其中，内存卡因其便携性和大容量而广受欢迎。然而，当内存卡突然损坏打不开时，我们该如何应对？本文将为您详细解析这一问题，并提供有效的解…...
python爬虫实战
import requests import json yesinput(输入页数：) yesint(yes)headers {"accept": "application/json, text/plain, */*","accept-language": "zh-CN,zh;q0.9","content-type": "application/json",…...
k8s 资源文件参数介绍
Kubernetes资源文件yaml参数介绍 yaml 介绍 yaml 是一个类似 XML、JSON 的标记性语言。它强调以数据为中心，并不是以标识语言为重点例如 SpringBoot 的配置文件 application.yml 也是一个 yaml 格式的文件 语法格式 通过缩进表示层级关系不能使用tab进行缩进&am…...
mac系统安装steam报错-解决办法
今天给虚拟机装了个苹果系统，然后想装个steam，从steam的官方下载安装steam_osx.dmg时，总是报“steam_osx已损坏，无法打开，请移动到废纸篓“。搜了一下找到了解决办法，这里记录一下。 双击steam_osx.dmg时&…...
这个簇状柱形图怎么添加百分比？
这个图表是excel默认的图表配色，有的人做出来都那个百分比，一起来做一个这样的图表。 1.插入图表 选中数据区域，点击 插入选项卡，在图表那一栏，点一下柱形图右侧那个倒三角，在弹邮对话框中，选…...
Tomact安装配置及使用(超详细)
文章目录 web相关知识概述web简介(了解)软件架构模式(掌握)BS：browser server 浏览器服务器CS：client server 客户端服务器 B/S和C/S通信模式特点(重要)web资源(理解)资源分类 URL请求路径(理解)作用介绍格式浏览器通过url访问服务器的过程 服务器(掌握)…...
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文件,如何单独运行某个文件？n…...
使用request-try-notifyState流程实现UI控制与状态反馈的完整闭环
1. 前言 在Qt编程时，我们经常会在界面上添加一些按钮，当按钮被点击时，执行某段代码，例如显示一个对话框、关闭窗口，保存文件等等。 这种由UI控件触发某种信号，通过信号槽触发目的代码执行的场景非常多。这…...
屏蔽罩材质和厚度对屏蔽效能的影响
一．屏蔽效能的影响因素 屏蔽效能的影响因素主要有两个方面：屏蔽材料的特性和厚度；如下图所示，电磁波经过不同媒介时，会在分界面形成反射，穿过界面的电磁波一部分被反射回去，这部分能量损失…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10pip3.10） 一：前言二：安装编译依赖二：安装Python3.10三：安装PIP3.10四：安装Paddlepaddle基础框架4.1…...
【深度学习新浪潮】什么是credit assignment problem？
Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...