MutationObserver DOM变化的观察
简单的给MutationObserver做个测试及总结笔记。
MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果。
可适用的需求:开发者在DOM变化过程中的debug、根据页面变化处理不同的资源、拦截网页是否被注入动态内容加载的脚本等等...
简单的案例代码如下,比如观察属性变化:
<button id="J_click">click</button>
<div id="J_dom" data-num="1">hello</div>
<script>
var dom = document.getElementById('J_dom'); var domObservable = new MutationObserver(function (mutationRecord) {
console.log('mutationRecord : ', mutationRecord)
}); document.getElementById('J_click').addEventListener('click', domChange, !1); domObservable.observe(dom, {
attributes: true,
attributeOldValue: true
}) function domChange() {
dom.setAttribute('data-num', +(dom.getAttribute('data-num')) + 1);
}
</script>
点击"click"按钮,J_dom的data-num属性从0变为1。控制台输出如下MutationRecord对象列表:
MutationObserver 构造函数需要传入一个回调函数用以执行观察到DOM变化后需要做的操作,回调函数以MutationRecord对象列表作为参数。
MutationRecord对象列表
MutationRecord对象包含以下属性:
1. type,DOM变化的类型,DOM属性变化为"attributes";DOM内数据变化为"characterData";子节点树结构变化为"childList";
2. target,如果如果type不为"childList",则代表发生变化的节点;如果type为"childList",则是被操作子节点(新增或删除)的父节点;
3. addedNodes,被观察的DOM内新增的节点列表;
4. removedNodes,被观察的DOM内移除的节点列表;
5. previousSibling,被添加或移除节点之前的兄弟节点;
6. nextSibling,被添加或移除节点之后的兄弟节点;
7. attributeName,被修改属性的属性名;
8. attributeNamespace,被修改属性的命名空间;
9. oldValue,旧值,根据type而返回对应的旧属性或旧数据。
观察者(观察对象)
观察者对象上存在3个操作方法:observe、takeRecords、disconnect。
observe方法指定一个被观察的DOM,配置该节点内的哪些变化需要被观察。方法使用如下:
var domObservable = new MutationObserver(function (mutationRecord) {
// 变化后的处理代码
}); domObservable.observe(/* 被观察的DOM */, /* 配置参数 */{
subtree: false, // 观察范围是否包含子节点的变化,true则包括,false则不包括
childList: false, // 被观察的节点的子节点变化,true则观察,false则不观察
attributes: false, // 被观察的节点的属性变化,true则观察,false则不观察
attributeOldValue: false, // MutationRecord对象上是否返回被观察的节点的属性变化之前的旧值,true则返回,false则不返回
attributeFilter: [/* 指定被观察的属性列表 */], // attributes为true时生效,比如设置了列表为['class'],则只观察class的变化
characterData: false, // 被观察的节点的数据变化,true则观察,false则不观察
characterDataOldValue: false // MutationRecord对象上是否返回被观察的节点的数据变化之前的旧值,true则返回,false则不返回
});
/**
* 注意:
* 在attributes未被配置的情况下,如果attributeOldValue为true或者attributeFilter被设置,则attributes默认为true。
* 在characterData未被配置的情况下,如果characterDataOldValue为true,则characterData默认为true。
*/
takeRecords方法返回当前操作后的MutationRecord对象列表。方法使用如下:
<button id="J_takeRecords">take records</button>
<div id="J_dom" data-num="1">
<span id="J_words">0</span>
<div id="J_subDom"></div>
</div>
<script>
var value = 0;
var operateDom = document.getElementById('J_dom');
var wordsDom = document.getElementById('J_words');
var takeRecordsBtn = document.getElementById('J_takeRecords'); takeRecordsBtn.addEventListener('click', takeRecords, !1); function takeRecords() {
console.log('%c both change attribute and subtree', 'color:blue');
operateDom.setAttribute('data-num', +(operateDom.getAttribute('data-num')) + 1);
wordsDom.innerText = wordsDom.innerText === '0' ? '零' : '0';
var result = domObservable.takeRecords();
console.log(result);
} var domObservable = new MutationObserver(function (mutationsList) {
console.log('mutationsList ', mutationsList);
}) domObservable.observe(operateDom, {
subtree: true,
attributes: true,
attributeOldValue: true,
characterData: true,
characterDataOldValue: true
});
</script>
<!-- 点击"take records"按钮,J_dom的data-num属性从0变为1,J_words里的0变成零 -->
<!-- 分别为一次attrbutes和一次characterData变化,takeRecords方法被调用返回一个包含两次变化的MutationRecord对象列表。-->
disconnect方法移除该观察者上的所有观察并清空该对象的MutationRecord对象列表。
最后,MutationObserver的兼容性如下:
嗯,还算行...
MutationObserver 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 ...
- 强大的DOM变化观察者MutationObserver
在这之前 DOM3 提供了 Mutation events 事件 DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DO ...
- html DOM 变化 通知,很好很强大
刚做一个项目,某个div标签显示后 需要接收一个事件,用于主动调用 window.resize(): 从网上找了了,发现 MutationObserver.给开发者们提供了一种能在某个范围内的DOM树 ...
- DOM变化后事件绑定失效
第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件.对于这个问题,有如下两种解决方法: 第一种是将绑定change事件封装成一个函数,在点击button按钮插 ...
- MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
- MutationObserver 监听 DOM 树变化
MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时,做出相应处理的 API .为什么要使用 MutationObserver 去代替 Mut ...
随机推荐
- Mustache应用——渲染二级菜单
一.菜单的样式 如上图所示,菜单一共两级.一级菜单的父结点都为0,二级菜单的父结点是前结点的code. code:为每一个结点独一无二的标识,也可以认为是ID. 二.菜单的数据结构 编写菜单的结构,采 ...
- command not found Operation not permitted
mysql -uroot -p 报错误:command not found 因为苹果在OS X 10.11中引入的SIP特性使得即使加了sudo(也就是具有root权限)也无法修改系统级的目录,其中 ...
- 关于python logging的 NOTSET 级别
说重点: NOTSET 意指不设置 所以按照父logger级别来过滤日志 注意 不是最低级别的意思 由于logging中root日志对象的默认级别是WARNING, 所以当你使用logging.get ...
- centos常用命令--备份
端口打开 命令如下:/sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT #8080为指定端口 /etc/rc.d/init.d/iptables ...
- POJ3616--Milking Time(动态规划)
Bessie is such a hard-working cow. In fact, she is so focused on maximizing her productivity that sh ...
- POJ2289 Jamie's Contact Groups(二分图多重匹配)
Jamie's Contact Groups Time Limit: 7000MS Memory Limit: 65536K Total Submissions: 7721 Accepted: ...
- execl 导出
/** * 导出 是把数表中的数据添加到execl表中 */ public function export(){ $xlsData = Db('user')->select(); Vendo ...
- 《A computer-aided healthcare system for cataract classification and grading based on fundus image analysis》学习笔记
Abstract This paper presents a fundus image analysis based computer aided system for automatic class ...
- [ASE][Daily Scrum]11.10
明天就是一年一度的光棍节了 提前提醒各位已经有妹子蓝孩子藏好自己的银行卡. 涛哥上周回家去了,进度上稍有一些耽搁不过今天就能补完所以影响不严重. 此外纠正我(PM-poor man)之前一个错误,我之 ...
- 【BZOJ3551】 [ONTAK2010]Peaks加强版
BZOJ3551 [ONTAK2010]Peaks加强版 Solution Kruscal重构树后发现可以对于小于的离散化然后倍增+主席树找到上一个的可行解. 然后就可以了. 如果数组开的不好,容易在 ...