简单的给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变化的观察的更多相关文章

  1. How Javascript works (Javascript工作原理) (十) 使用 MutationObserver 监测 DOM 变化

    个人总结: 这篇文章介绍了几种监测DOM变化的方法,重点介绍的是一个新浏览器API叫做MutationObserver. 注意:不要和Vue.js种 Object.defineProperty() 的 ...

  2. JavaScript 工作原理之十-使用 MutationObserver 监测 DOM 变化

    原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十章. 网络 ...

  3. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  4. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  5. 强大的DOM变化观察者MutationObserver

    在这之前 DOM3 提供了 Mutation events 事件 DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DO ...

  6. html DOM 变化 通知,很好很强大

    刚做一个项目,某个div标签显示后 需要接收一个事件,用于主动调用 window.resize(): 从网上找了了,发现 MutationObserver.给开发者们提供了一种能在某个范围内的DOM树 ...

  7. DOM变化后事件绑定失效

    第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件.对于这个问题,有如下两种解决方法: 第一种是将绑定change事件封装成一个函数,在点击button按钮插 ...

  8. MutationObserver 监听DOM树变化

    1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...

  9. MutationObserver 监听 DOM 树变化

    MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时,做出相应处理的 API .为什么要使用 MutationObserver 去代替 Mut ...

随机推荐

  1. Mustache应用——渲染二级菜单

    一.菜单的样式 如上图所示,菜单一共两级.一级菜单的父结点都为0,二级菜单的父结点是前结点的code. code:为每一个结点独一无二的标识,也可以认为是ID. 二.菜单的数据结构 编写菜单的结构,采 ...

  2. command not found Operation not permitted

    mysql -uroot -p  报错误:command not found 因为苹果在OS X 10.11中引入的SIP特性使得即使加了sudo(也就是具有root权限)也无法修改系统级的目录,其中 ...

  3. 关于python logging的 NOTSET 级别

    说重点: NOTSET 意指不设置 所以按照父logger级别来过滤日志 注意 不是最低级别的意思 由于logging中root日志对象的默认级别是WARNING, 所以当你使用logging.get ...

  4. centos常用命令--备份

    端口打开 命令如下:/sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT #8080为指定端口 /etc/rc.d/init.d/iptables ...

  5. POJ3616--Milking Time(动态规划)

    Bessie is such a hard-working cow. In fact, she is so focused on maximizing her productivity that sh ...

  6. POJ2289 Jamie's Contact Groups(二分图多重匹配)

    Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 7721   Accepted: ...

  7. execl 导出

    /** * 导出   是把数表中的数据添加到execl表中 */ public function export(){ $xlsData = Db('user')->select(); Vendo ...

  8. 《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 ...

  9. [ASE][Daily Scrum]11.10

    明天就是一年一度的光棍节了 提前提醒各位已经有妹子蓝孩子藏好自己的银行卡. 涛哥上周回家去了,进度上稍有一些耽搁不过今天就能补完所以影响不严重. 此外纠正我(PM-poor man)之前一个错误,我之 ...

  10. 【BZOJ3551】 [ONTAK2010]Peaks加强版

    BZOJ3551 [ONTAK2010]Peaks加强版 Solution Kruscal重构树后发现可以对于小于的离散化然后倍增+主席树找到上一个的可行解. 然后就可以了. 如果数组开的不好,容易在 ...