强大的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 ...
随机推荐
- VS2013预览版安装 体验截图
支持与msdn帐号链接: 不一样的团队管理: 新建项目:
- 原生AJAX入门讲解(含实例)
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
- iframe在iphone6 plus的safari下子页面的宽度不受父页面控制的bug
这是想要的效果: 样式设置是iframe外面的宽度为100%,iframe的宽度为父元素的90%,高度为宽度 除以1.6,固定比例, 正常显示就是上面的样子,但是,问题出现在iphone特定手机特定版 ...
- Effective java笔记(七),通用程序设计
45.将局部变量的作用域最小化 将局部变量的作用域最小化,可以增强代码的可读性和可维护性,并降低出错的可能性. Java允许在任何可以出现语句的地方声明变量(C语言中局部变量要在代码块开头声明),要使 ...
- 转:sublime text注册码
—– BEGIN LICENSE —–Michael BarnesSingle User LicenseEA7E-8213858A353C41 872A0D5C DF9B2950 AFF6F667C4 ...
- 浅谈SQL Server中的三种物理连接操作
简介 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所选数据的选择性转化为Loop Join,Merge J ...
- placeholder的样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
- jquery 格式化系统时间
Date.prototype.Format = function (fmt) { //javascript时间日期函数 var o = { "M+": this.getMonth( ...
- 使用java操作MongoDB
1.环境准备 下载mongoDB对Java支持的驱动包 驱动包下载地址:https://github.com/mongodb/mongo-java-driver/downloads 2.查询集合中所有 ...
- java多线程-线程池
线程池(Thread Pool)对于限制应用程序中同一时刻运行的线程数很有用.因为每启动一个新线程都会有相应的性能开销,每个线程都需要给栈分配一些内存等等. 我们可以把并发执行的任务传递给一个线程池, ...