js 如何监听 body 内容是否改变

news/2024/9/28 14:40:00/
htmledit_views">

如果您想监听body内容的变化,并作出响应,可以使用MutationObserver。以下是一个简单的例子,它会在body内容变化时在控制台输出一条消息:

html" title=javascript>javascript">// 创建一个观察者对象
const observer = new MutationObserver(function(mutations, observer) {if(mutations[0].target.innerHTML !== mutations[0].oldValue) {console.log('Body content changed!');}
});// 观察body元素的变化
const body = document.querySelector('body');
const config = { attributes: true, childList: true, subtree: true };observer.observe(body, config);

当body的子内容或子元素发生变化时,MutationObserver会被触发,并且如果检测到body的innerHTML发生了变化,它会在控制台输出一条消息。

请注意,MutationObserver可以监听所有类型的DOM变化,包括属性变化、节点添加、节点移除等。在上面的代码中,config对象定义了我们想要观察的特定变化类型。

要停止监听变化,可以调用observer.disconnect()方法。

这个办法可以用来监听页面某个对象元素是否已经加载到页面,然后再对该对象元素执行操作。


http://www.ppmy.cn/news/1531195.html

相关文章

001、restful设计规范

https://www.kancloud.cn/kancloud/rest-api-design-safety/78113 https://www.kancloud.cn/kancloud/http-api-design/78123 https://www.kancloud.cn/kancloud/http-api-guide/56268 restful接口设计规范 按照restful接口设计规范 GET (SELECT)&…

flutter 设置字体大小,适应各种屏幕

起因, 目的: 来源就是客户需求。 从个人角度来说,我讨厌 flutter, 和 java 一样, 都是 臃肿,繁琐,死板. 1. 过程: 根据用户的屏幕尺寸,把子元素大小, 字体的大小,都设置为百分比&…

Mac pnpm安装

安装pnpm的时候一定要把npm更新到最新版 不然pnpm下载不成功。 (更新npm):sudo npm install -g npm (安装pnpm:) sudo npm install -g pnpm 检验安装是否成功:pnpm --version 项目内安装依赖:pnpm install / 运行项目&…

用Python实现运筹学——Day 4: 线性规划的几何表示

一、学习内容 线性规划的几何表示: 线性规划问题的解通常位于一个凸多边形(即可行解空间)的顶点上,这意味着在求解线性规划问题时,只需要找到可行解空间中的顶点并计算出目标函数值,再选择其中的最优解。 可…

车道线拟合

聚类如何帮助解决斑马线误拟合问题 聚类算法通过将相似的像素或特征点归为一类,可以用来分析图像中的不同结构(例如车道线和斑马线)。以下是一些具体的聚类方法和它们在车道线检测中的应用: 1. 基于几何特征的聚类 斑马线和车道…

解决R包依赖版本不兼容问题

ERROR: dependency ‘Matrix’ is not available for package ‘irlba’ removing ‘/root/anaconda3/envs/myview/lib/R/library/irlba’ ERROR: dependency ‘Matrix’ is not available for package ‘N2R’ removing ‘/root/anaconda3/envs/myview/lib/R/library/N2R’ ER…

【Python语言初识(五)】

一、文件和异常 在Python中实现文件的读写操作其实非常简单,通过Python内置的open函数,我们可以指定文件名、操作模式、编码信息等来获得操作文件的对象,接下来就可以对文件进行读写操作了。这里所说的操作模式是指要打开什么样的文件&#…

C++读取txt文件中的句子在终端显示,同时操控鼠标滚轮(涉及:多线程,产生随机数,文件操作等)

文章目录 🌕运行效果🌕功能描述🌕代码🌙mian.cpp🌙include⭐MouseKeyControl.h⭐TipsManagement.h 🌙src⭐MouseControl.cpp⭐TipsManagement.cpp 🌕运行效果 🌕功能描述 线程一&am…