当前位置: 首页 > article >正文

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

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

// 创建一个观察者对象
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.kler.cn/news/325511.html

相关文章:

  • 【WPF】桌面程序开发之窗口的用户控件详解
  • MATLAB绘图基础
  • 利用 PostgreSQL 构建 RAG 系统实现智能问答
  • 小程序视频编辑SDK解决方案,轻量化视频制作解决方案
  • 三菱PLC数据 转 profinet IO项目案例
  • 使用 Docker 部署 RStudio 的终极教程
  • Spring Boot 点餐系统:一键订餐解决方案
  • C++之Person类中调用Date类
  • 电脑使用adb工具连接手机,全文完整教程
  • MFC - 常用基础控件
  • 高防服务器如何抵御网络攻击?
  • RT-DETR改进策略:BackBone改进|PoolFormer赋能RT-DETR,视觉检测性能显著提升的创新尝试
  • 11.C++程序中的常用函数
  • 【含文档】基于Springboot+Vue的个性化推荐电商平台(含源码+数据库+lw)
  • 【网络安全】公钥密码体制
  • 关于QSizeGrip在ui界面存在布局的情况下的不显示问题
  • 绿色新纪元:光伏技术飞跃与能源体系重塑
  • keil仿真||示波器的使用
  • unixODBC编程(三)查询数据库表中的数据
  • LangChain:构建复杂 NLP 应用的框架
  • ENV | docker 安装使用(简单实操版)
  • Llama 3.2来了,多模态且开源!AR眼镜黄仁勋首批体验,Quest 3S头显价格低到离谱
  • C语言介绍
  • Object Pascal 过程与函数
  • Ubuntu网卡配置
  • rabbitMQ 简单使用
  • 23中设计模式,以及三种常见的设计模式demo
  • 使用::selection改变文字被选中后的颜色
  • 深圳mes制造系统的主要功能
  • WIFI密码默认显示