简单的给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. NLP生成论文

    论文框架 内容 注:既要有引用,又不能完全引用,是在前人基础上更进一步.

  2. #define 和typedef

    #define PI 3.1415926 #define是将数值进行定义(语法上也可以定义类型但不建议这么做,具体下面问题说) typedef int Data; rypedef是对类型进行定义 注意 ...

  3. POJ3176--Cow Bowling(动态规划)

    The cows don't use actual bowling balls when they go bowling. They each take a number (in the range ...

  4. python模块补充

    一.模块补充 configparser 1.基本的读取配置文件 -read(filename) 直接读取ini文件内容 -sections() 得到所有的section,并以列表的形式返回 -opti ...

  5. Http TCP/IP协议和socket之间的区别和联系

    总结,TCP/IP是传输层协议,主要解决数据如何在网路中传输,socket是TCP/IP协议的具体实现,是对TCP/IP协议的封装和应用,属于程序员层面,HTTP是应用层协议,应用层协议很多,类似的像 ...

  6. Python自动化开发 - AJAX

    一  AJAX预备知识:json进阶 1.1 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象 json ...

  7. 前端开发 - JavaScript 词法分析

    JavaScript代码运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 1.分析函数的参数 2.分析函数的变量声明 3.分析函数的函数声明表达式 具体步骤如下: 函数在运行的瞬间,生成 ...

  8. caffe 每层结构

    如何在Caffe中配置每一个层的结构 最近刚在电脑上装好Caffe,由于神经网络中有不同的层结构,不同类型的层又有不同的参数,所有就根据Caffe官网的说明文档做了一个简单的总结. 1. Vision ...

  9. nuget.org无法解析的办法

    今天想学习ef框架,就着手安装最新的ef啦.可是遇到了问题,提示 未能解析此远程名称:'nuget.org' 就去上网找资料啦,发现原来是被墙了,表示无奈. 网上的资料提示,修改hosts文件或是dn ...

  10. 在 Centos7 的KVM上启用嵌套虚拟化

    1.嵌套虚拟化意味着在虚拟机内配置虚拟化环境.换句话说,我们可以说嵌套虚拟化是虚拟机管理程序hypervisor的一个特性,它允许我们通过虚拟化管理程序(宿主机)的硬件加速在虚拟服务器内安装和运行虚拟 ...