<!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. WPF-3D图形

    WPF-3D图形 WPF的3D功能可以在不编写任何c#代码的情况下进行绘制,只需要使用xaml即可完成3D图形的渲染.本文主要讲述了WPF-3D中的关键概念, 以及常用到的命中测试.2d控件如何在3D ...

  2. 华为云发布冷启动加速解决方案：助力Serverless计算速度提升90%+

    摘要:本文介绍了华为云对冷启动优化这一业界难题的探索之路,创新提出了基于进程级快照的优化方案. 作者信息-- 子游:华为元戎高级工程师 平山:华为云中间件 Serverless 负责人 琪君:华为元戎 ...

  3. Java语言的跨平台性-JDK,JRE和JVM

    Java语言的跨平台性 1 Java虚拟机--JVM JVM(Java Virtual Machine ):Java虚拟机,简称JVM,是运行所有Java程序的假想计算机,是Java程序的 运行环境, ...

  4. 一文搞懂工作流审批（Java+activiti）快速开发+自定义工作流配置

    前言 activiti工作流引擎项目,企业erp.oa.hr.crm等企事业办公系统轻松落地,一套完整并且实际运用在多套项目中的案例,满足日常业务流程审批需求. 一.项目形式 springboot+v ...

  5. Python中的函数定义中的斜杠/和星号*

    Python中的函数定义中的斜杠/和星号* 示例 看一段代码  def say_hello(name,age=18):     print(f'你好!我是{name},今年我{age}啦.') say ...

  6. 线程基础知识 04 synchronized锁的四种状态和升级

    转https://www.cnblogs.com/mingyueyy/p/13054296.html 1 轻量级锁和重量级锁简要说明 线程调度本来是由操作系统来管理的.现在,操作系统上跑了一个虚拟机J ...

  7. 如何快速搭建 Maven私服Nexus【实践可行版】

    搭建私服Nexus Nexus 一般用来搭建位于组织或公司内部的 Maven 私服,代理所有的仓库(包括中央仓库),用户通过它就可以获取和管理所有所需的 Maven 构件. Nexus 开源版具有以下 ...

  8. react 高效高质量搭建后台系统 系列 —— 结尾

    其他章节请看: react 高效高质量搭建后台系统 系列 尾篇 本篇主要介绍表单查询.表单验证.通知(WebSocket).自动构建.最后附上 myspug 项目源码. 项目最终效果: 表单查询 需求 ...

  9. 基于pytorch实现模型剪枝

    一,剪枝分类 1.1,非结构化剪枝 1.2,结构化剪枝 1.3,本地与全局修剪 二,PyTorch 的剪枝 2.1,pytorch 剪枝工作原理 2.2,局部剪枝 2.2.1,局部非结构化剪枝 2.2 ...

  10. word、excel、pdf等多种格式在线预览

    第一种方式: 具体功能说明: http://view.xdocin.com/index.html 调用案例: <a href="http://www.xdocin.com/xdoc?_ ...