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控件触发某种信号，通过信号槽触发目的代码执行的场景非常多。这…...
屏蔽罩材质和厚度对屏蔽效能的影响
一．屏蔽效能的影响因素 屏蔽效能的影响因素主要有两个方面：屏蔽材料的特性和厚度；如下图所示，电磁波经过不同媒介时，会在分界面形成反射，穿过界面的电磁波一部分被反射回去，这部分能量损失…...
终极指南：如何让Figma说中文，快速提升设计效率
终极指南：如何让Figma说中文，快速提升设计效率 【免费下载链接】figmaCN 中文 Figma 插件，设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN FigmaCN是一款专为中文用户设计的Figma中文界面插件，通…...
基于Vue3+TypeScript的ChatGPT风格前端界面集成实战
1. 项目概述与核心价值最近在折腾一个个人项目，想给一个静态网站加上智能对话的能力，让访客能随时问点问题。一开始想自己从零搭建，但考虑到前后端、AI接口、实时通信这些环节，工作量着实不小。后来在GitHub上逛的时候，…...
frp-panel：基于Web的图形化管理面板，让内网穿透配置更高效
1. 项目概述：一个为内网穿透工具打造的管理面板如果你用过 frp，大概率会和我有同样的感受：它的功能强大、性能稳定，是解决内网服务暴露、远程访问等问题的利器。但它的配置方式——编辑一个文本格式的.toml或.ini文件，…...
如何快速解决AKShare股票数据获取失败：完整的数据采集优化指南
如何快速解决AKShare股票数据获取失败：完整的数据采集优化指南 【免费下载链接】akshare AKShare is an elegant and simple financial data interface library for Python, built for human beings! 开源财经数据接口库 项目地址: https://gitcode.com/gh_mirror…...
BepInEx.ConfigurationManager：3步打造专业级Unity插件配置界面
BepInEx.ConfigurationManager：3步打造专业级Unity插件配置界面 【免费下载链接】BepInEx.ConfigurationManager Plugin configuration manager for BepInEx 项目地址: https://gitcode.com/gh_mirrors/be/BepInEx.ConfigurationManager 你是否曾为Unity游戏…...
杰理之升压档位选择，需要同步修改过压档位【篇】
#define TCFG_BOOST_VOUT_S BOOST_VOUT_S_4700_MV //VOUT OV UV #define VOUT_OV_VOLT VOUT_OV_VOL_S_5P53V_TO_5P34V...
Python 开发者五分钟接入 Taotoken 调用 GPT 与 Claude 模型
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Python 开发者五分钟接入 Taotoken 调用 GPT 与 Claude 模型 对于需要在项目中集成大语言模型的 Python 开发者而言，逐…...
小白程序员必看！收藏这份AI学习指南，从0到1逆袭高薪职业（内含经验分享）
作者原UI设计师，因职业瓶颈被辞退后转行AI领域。文章分享了学习AI的动机、遇到的困难、心得体会以及成功转行后的薪资提升经历。强调主动拥抱变化的重要性，建议多练习、多总结，并感谢老师们的耐心指导。最后，作者表示将继续深耕AI…...
ElevenLabs语音合成效果翻倍的秘密（行业未公开的声学参数调优矩阵）
更多请点击： https://intelliparadigm.com 第一章：ElevenLabs英文语音合成效果翻倍的核心洞察 关键瓶颈在于语音上下文建模粒度 ElevenLabs 的高质量语音合成并非单纯依赖更大模型参数量，而是通过细粒度的语义-韵律联合编码实现自然度跃升。…...
FPGA高速ADC数据采集实战——基于AD9253 LVDS接口与ISERDESE2设计
1. AD9253高速ADC核心特性解析 AD9253这颗14位125MSPS四通道ADC芯片，在通信和医疗成像领域堪称经典。我经手过的多个雷达项目中，它的信噪比表现总能带来惊喜——75.3dBFS的实测数据比手册标称值还要稳定。但真正让工程师们又爱又恨的，是它那个…...