在这之前 DOM3 提供了 Mutation events 事件
- DOMAttrModified
- DOMAttributeNameChanged
- DOMCharacterDataModified
- DOMElementNameChanged
- DOMNodeInserted
- DOMNodeInsertedIntoDocument
- DOMNodeRemoved
- DOMNodeRemovedFromDocument
- DOMSubtreeModified
可以监听到属性、文本内容、节点插入删除、子节点变化等事件。可是该事件 W3C 已废弃,虽然一些浏览器仍然支持,但不建议使用。
MutationObserver目前IE11+及其它浏览器最新版本都已支持。可以通过以下代码判断是否支持
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver; var supportMutationObserver = !!MutationObserver;
使用如下
var mo = new MutationObserver(callback);
var div = document.querySelector('div'); var options = {
'childList': true,
'arrtibutes': true
}; mo.observer(div, options);
options 是配置参数,这里的配置可以观察到 div 元素的子元素和属于变动。
options 有如下选项
- childList: 子元素的变动
- attributes: 属性的变动
- characterData: 节点内容或节点文本的变动
- subtree: 所有下属节点(包括子节点和子节点的子节点)的变动
- attributeOldValueL: 值为true或者为false。如果为true,则表示需要记录变动前的属性值
- characterDataOldValue: 值为true或者为false。如果为true,则表示需要记录变动前的数据值
- attributesFilter: 值为一个数组,表示需要观察的特定属性(比如['class', 'str'])
当变动发生时回调函数会将变动记录 MutationRecord 对象传入,MutationRecord 包含了 DOM 的相关信息,有如下属性
- type: 观察的变动类型(attribute、characterData或者childList)
- target: 发生变动的DOM对象
- addedNodes: 新增的DOM对象
- removeNodes: 删除的DOM对象
- previousSibling: 前一个同级的DOM对象,如果没有则返回null
- nextSibling: 下一个同级的DOM对象,如果没有就返回null
- attributeName: 发生变动的属性。如果设置了attributeFilter,则只返回预先指定的属性
- oldValue: 变动前的值。这个属性只对attribute和characterData变动有效,如果发生childList变动,则返回null
示例1:观察子元素的变动
function callback(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob = new MutationObserver(callback)
ob.observe(app1, {
childList: true,
subtree: true
})
p1
app1
配置项 childList 表示观察子元素,subtree 表示观察子元素的下级元素。在本页面的浏览器控制台输入以下代码分别测试
app1.removeChild(p1)
app1.appendChild(document.createTextNode('TEST'))
示例2:观察属性的变化
function callback2(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob2 = new MutationObserver(callback2)
ob2.observe(app2, {
attribute: true,
attributeOldValue: true
})
配置参数跟踪属性变动('attributes': true),然后设定记录变动前的值。实际发生变动时,会将变动前的值显示在控制台。打开本页面的浏览器控制台,输入以下代码测试
app2.id = 'apptest'
示例3:观察文本元素的变化
function callback3(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob3 = new MutationObserver(callback3)
ob3.observe(app3, {
characterData: true
})
示例3:观察元素内容的变动
function callback3(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob3 = new MutationObserver(callback3)
ob3.observe(app3, {
childList: true,
characterData: true,
characterDataOldValue: true
})
配置项会观察元素文本的变化,当变动时会记录老的文本元素。打开本页面的浏览器控制台,输入以下代码测试
app3.appendChild(document.createTextNode(' hello'))
相关:
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
https://dev.opera.com/articles/mutation-observers-tutorial/
http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html
强大的DOM变化观察者MutationObserver的更多相关文章
-
MutationObserver DOM变化的观察
简单的给MutationObserver做个测试及总结笔记. MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果. 可适用 ...
-
How Javascript works (Javascript工作原理) (十) 使用 MutationObserver 监测 DOM 变化
个人总结: 这篇文章介绍了几种监测DOM变化的方法,重点介绍的是一个新浏览器API叫做MutationObserver. 注意:不要和Vue.js种 Object.defineProperty() 的 ...
-
JavaScript 工作原理之十-使用 MutationObserver 监测 DOM 变化
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十章. 网络 ...
-
js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
-
Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
-
html DOM 变化 通知,很好很强大
刚做一个项目,某个div标签显示后 需要接收一个事件,用于主动调用 window.resize(): 从网上找了了,发现 MutationObserver.给开发者们提供了一种能在某个范围内的DOM树 ...
-
DOM变化后事件绑定失效
第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件.对于这个问题,有如下两种解决方法: 第一种是将绑定change事件封装成一个函数,在点击button按钮插 ...
-
JS函数节流代码实现
函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...
-
js dom 观察者属性 MutationObserver
MDN上说的很清楚 MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件 co ...
随机推荐
-
elasticsearch【cat API,系统数据】指令汇总
本博文讲述的ES获取系统数据的API是基于Elasticsearch 2.4.1版本的. 0. overview a. 下面将要介绍的所有的指令,都支持一个查询参数v(verbose),用来显示详细的 ...
-
CodeIgniter 发送邮件
1. 在config目录中增加email.php $config['charset'] = 'utf-8'; $config['wordwrap'] = TRUE; $config['protocol ...
-
在wdcp环境下架设VSFTPD虚拟用户只上传功能服务器
检查系统是否已安装vsftp rpm -q vsftpd package vsftpd is not installed #说明系统没有安装vsftpd 如果生成虚拟用户数据文件的时候出现以下错误 u ...
-
Android---App Widget(一)
本文译自:http://developer.android.com/guide/topics/appwidgets/index.html App Widgets是一些较小的应用程序窗口,它们能够被嵌入 ...
-
Android 用 camera2 API 自定义相机
前言 笔者因为项目需要自定义相机,所以了解了一下 Android 关于 camera 这块的 API.Android SDK 21(LOLLIPOP) 开始已经弃用了之前的 Camera 类,提供了 ...
-
C++实现的控制台-贪吃蛇
周六终于可以抽出一整段时间了 想了想就写个贪吃蛇吧 第一次写 差不多下了140行 也不算太多吧 以后ACM比赛是在做不来就自己打个贪吃蛇玩 ps:本来想写个项目的 但是为了方便你们阅读 就写在 ...
-
两两交换链表中的节点(java实现)
题目: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, 你应该返回 ...
-
云笔记项目-Spring事务学习-传播NEVER
接下来测试事务传播属性NEVER Service层 Service层中设置事务传播属性都为NEVER. LayerT层代码 package LayerT; import javax.annotatio ...
-
【BZOJ1568】[JSOI2008]Blue Mary开公司(李超线段树)
[BZOJ1568][JSOI2008]Blue Mary开公司(李超线段树) 题面 BZOJ 洛谷 题解 是模板题啊. #include<iostream> #include<cs ...
-
Cassandra Demo--Python操作cassandra
================================================================ 创建keyspace和table CREATE KEYSPACE ex ...