<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript监听DOM内容改变事件</title>
<style type="text/css">
#el-test{
line-height: 100px;
width: 200px;
border: #fff solid 1px;
text-align: center;
}
</style>
</head>
<body>
<div id="el-test">QQ 183672812</div>

<script type="text/javascript">
// 选中观察突变的节点
var targetNode = document.getElementById('el-test');

// 观察者的选项(要观察哪些突变)
var config = { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true };

// 当观察到突变时执行的回调函数
var callback = function(mutationsList) {
mutationsList.forEach(function(item,index,arr){
if (item.type == 'childList') {
console.log('有节点发生变化，当前节点的内容是：');
console.log(item.target.innerHTML);
} else if (item.type == 'attributes') {
console.log(item.attributeName+'-----属性item.attributeName 发生了变化');
}
});
};

// 创建一个链接到回调函数的观察者实例
var observer = new MutationObserver(callback);

// 开始观察已配置突变的目标节点
observer.observe(targetNode, config);

// 停止观察
//observer.disconnect();
</script>
</body>
</html>

DOM状态监听（观察者模式）的更多相关文章

  1. 截屏状态监听 - iOS

    既接到电话状态监听的需求之后再次添加了截屏状态的监听,当使用 App 时若用户执行截屏操作需要对当前状态进行监听操作,下面有两种方法,其中可以替换截屏的图片内容(Plan A),也可以弹出提示框(Pl ...

  2. Android USB大容量存储时SD卡状态监听(转)

    对SD卡状态监听,到现在为止我知道的有两种方式: 1.注册StorageEventListener来监听sd卡状态 StorageEventListener中有onStorageStateChange ...

  3. 录屏状态监听之防录屏 - iOS

    继之前接到电话.短信和截屏监听需求之后,在 iOS 11.0 系统之上新增了屏幕录制的新功能玩法,所以也随之迎来了新的屏幕录制监听的需求,即防录屏功能监听 ... 通过官方文档得知 capturedD ...

  4. android切换前后台状态监听

    public class BaseApplication extends Application { private static BaseApplication instance; /** * 当前 ...

  5. iOS实现电话状态监听 CoreTelephony

    在程序中如果需要监听电话状态,可以引入CoreTelephony框架,这个框架包含了电话相关的API,可以实现监测来电,查看运营商信息等功能.下面就是具体的实现监测来电的代码.一定要把center写成 ...

  6. 短信状态监听 - iOS

    当使用 App 时若短信介入需要对当前状态进行监听操作,根据不同的状态实行相关的需求操作,废话不多说步骤如下. 首先,常规操作先引用对应的头文件,来为后续功能铺路. #import <Messa ...

  7. 电话状态监听 - iOS

    今天接到一个监听状态的需求,当使用 App 时若电话介入需要对当前状态进行监听操作(注:并非通话内容),根据不同的状态实行相关的需求操作,废话不多说步骤如下. 首先,常规操作先引用对应的头文件,来为后 ...

  8. 改进xutils下载管理器，使其，在随意地方进行进度更新，以及其它状态监听操作

    1.前面在做下载进度监听.尝试过,通过加入 弱引用的View进度条,到相应的集合. 等到要进行更新进度的时候.通过Key 获取相应的VIew来进行更新 进度条.效果是达到了,可是我们怎样来监听其它的状 ...

  9. DOM事件监听和触发

    EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口. 这个接口有三个方法:addEventListener, removeEventLi ...

  10. DOM 事件监听 事件冒泡 事件捕获

    addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...

随机推荐

  1. Java基础学习笔记-类的静态属性和静态方法--待继续补充

    程序运行时的内存占用 代码区(code area) 存放代码 数据区(data area) 存放全局数据.静态数据 堆区(heap area) 存放动态申请的数据 栈区(stack area) 存放局 ...

  2. flutter Error:Cannot run with sound null safety, because the following dependencies don't support

    学习flutter新版本的路上,真的是一天一个新惊喜啊 今天遇到的坑是 Flutter 升级高版本后,运行和build 报错 Error: Cannot run with sound null saf ...

  3. .Net 7 托管Main入口的四种类型

    前言: 按照CLR的规则,C#托管Main入口其实有四种写法. 写法 第一种:最常见的,也是VS默认的,返回值void,带一个参数 static void Main(string[] args) { ...

  4. 请求的URI过长：414 Request-URI Too Large

    问题:在项目中遇到使用get 请求,发现前端传递的参数超过nginx 服务器的限制.三种解决方法(任选一种): 1.在nginx配置文件里面把这两个缓存加大 文件位置:conf/nginx.conf ...

  5. 【分析笔记】Linux I2C-Tools 使用踩坑笔记

    一.踩坑缘由 在调试 I2C 器件时,我一般习惯于使用 i2cdetect 工具来确认芯片是否有应答,通常有应答之后,就会开始着手移植或者编写对应的驱动程序,但是在调试 sgp41 传感器时却不灵了. ...

  6. 【CTO变形记】驱动力的选择

    前言:每个人做事,都有着各种动机在里面,有时候看似不可理解的行为或者选择,初一看,可能是'认知',其实深层次实际是内在驱动力使然.例如,当一个人找我们问各种问题的时候,我们往往会先问'你的意图'是什么 ...

  7. Python标准库pathlib及实例操作

    Python标准库pathlib及实例操作 https://docs.python.org/zh-cn/3.9/library/pathlib.html 官网 讲的比较好的文章 https://zhu ...

  8. http八股 跨域的本质 请求行 请求头 请求体 xss

    1小八股 介绍 http 请求分为三个部分,请求行,请求头,请求体 还有状态码的含义 https://juejin.cn/post/7096317903200321544 2tips Content- ...

  9. 不像JVM的JVM

    1.面向对象 面向对象的思想:将功能封装到对象中,通过对象去实现 面向对象的目的:将复杂的事情简单化,将以前过程中的执行者变成了指挥者且符合现在人们的思考习惯 面向对象的三大特征: 封装:将对象的实现 ...

  10. MySQL 版本号排序

    1.业务背景 版本检查接口返回版本号排序时出现如下图所示问题 普通的查询按数字值逐级比较,导致版本号高的排在了后面,这样版本检查根据版本号排序倒排取出来的不是最新的版本号,本文就此问题查询了诸多方法, ...