强大的DOM变化观察者MutationObserver
在这之前 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 ...
随机推荐
- using语法糖详解 2015-01-06 17:45 50人阅读 评论(0) 收藏
前段事件在using外套try catch 突然想到,如果出现异常 会不会执行释放,不执行的话那服务器很可能导致崩溃... 特意上了CSDN问了大神..得到了答案.. Using相等于try catc ...
- Hibernate —— 映射关联关系(附录)
一.单向的多对一 1.建表语句 CREATE TABLE customer ( customer_id ) NOT NULL AUTO_INCREMENT PRIMARY KEY , ) CREATE ...
- python基础之函数
python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...
- WindowsAPI调用和OCR图片识别
傻了吧唧的装双系统.成功的干崩了原本的系统.现在重装VS.闲的没事胡扯几句. WindowsAPI在每一台Windows系统上开放标准API供开发人员调用.功能齐全.在这里只介绍三个部分. 1.利用A ...
- 【HTML DOM】Node.nodeValue的用法
目录结构: // contents structure [-] 语法 注意 详述 实例 参考文章 Note.noteValue 属性返回或设置当前属性的值. 语法 value = node.nodeV ...
- 带节日和农历的js日历
带农历的脚本: http://keleyi.com/keleyi/phtml/jstexiao/11.htm http://keleyi.com/tools/rili/ <html> &l ...
- 前端可视化开发-livereload
在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...
- jquery实现导航图轮播
版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...
- Microsoft Dynamics AX 7 新特性探索 - Demo 部署(Part 1)
Dynamics AX 7已经发布了一段时间了,我们知道这次微软为我们带来了许多令人激动的新特性.在这个系列里,Reinhard将揭开New Dynamics AX的神秘面纱,和大家一起探索这些新的特 ...
- iOS APP上架过程常见问题
1.生产证书失效 2.上图中的蓝色选中部分的Provising Profile文件页需要导入,(调试证书(Developer).发布证书(distribution).还有Provising Profi ...