转: HTML5新特性之Mutation Observer

Mutation Observer是什么

Mutation Observer(变动观察器)是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知(执行预先指定的回调)。

Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。

这样设计是为了应付DOM变动频繁的情况。举例来说，如果在文档中连续插入1000个段落(p元素)，会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而Mutation Observer完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

Mutation Observer的特点

它等待所有脚本任务完成后，才会运行，即采用异步方式

它把DOM变动记录封装成一个数组进行处理，而不是一条条地个别处理DOM变动。

它即可以观察发生在DOM节点的所有变动，也可以观察某一类变动

特性检测浏览器是否支持

var MutationObserver = window.MutationObserver || window.WebkitMutaionObserver || window.MozMutationObserver;

var supported = !!MutationObserver;

使用方法

首先，使用MutationObserver构造函数，新建一个实例，同时指定这个实例的回调函数。

var mo = new MutationObserver(callback);

observer方法指定所要观察的DOM元素，以及要观察的特定变动。

var article = document.querySelector('article');

var options = {

childList: true,

attributes: true

}

mo.observe(article, options);

上面代码首先指定，所要观察的DOM元素提article，然后指定所要观察的变动是子元素的变动和属性变动。

MutationObserver所观察的DOM变动(即上面代码的option对象)，包含以下类型：

childList：子元素的变动

attributes：属性的变动

characterData：节点内容或节点文本的变动

subtree：所有下属节点(包括子节点和子节点的子节点)的变动

想要观察哪一种变动类型，就在option对象中指定它的值为true。需要注意的是，不能单独观察subtree变动，必须同时指定childList、attributes和characterData中的一种或多种。

除了变动类型，option对象还可以设定以下属性：

attributeOldValue：值为true或者为false。如果为true，则表示需要记录变动前的属性值。

characterDataOldValue：值为true或者为false。如果为true，则表示需要记录变动前的数据值。

attributesFilter：值为一个数组，表示需要观察的特定属性(比如['class', 'str'])。

disconnect方法用来停止观察。发生相应变动时，不再调用回调函数。

mo.disconnect();

takeRecord方法用来清除变动记录，即不再处理未处理的变动。

mo.takeRecord();

MutationRecord对象

DOM对象每次发生变化，就会生成一条变动记录。这个变动记录对应一个MutationRecord对象，该对象包含了与变动相关的所有信息。Mutation Observer进行处理的一个个变动对象所组成的数组。

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 - 子元素的变动

var callback = function(records) {

records.map(function(record) {

console.log('mutation type:', record.type);

console.log('mutation target:', record.target);

});

};

var mo = new MutationObserver(callback);

var options = {

childList: true,

subtree: true

};

// 观察body元素的所有下级元素(childList表示观察子元素，subtree表示观察子元素的下级元素)的变动。回调函数会在控制台显示所有变动的类型和目标元素。

mo.observe(document.body, options);

实例2 - 属性变动

var callback = function(records) {

records.map(function(record) {

console.log('previous attribute:', record.oldValue);

});

};

var mo = new MutationObserver(callback);

var element = document.querySelector('#app');

var options = {

attribute: true,

attributeOldValue: true

};

mo.observe(element, options);

HTML5新特性之Mutation Observer

Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动时,Mutation Observer会得到通知. 要概念上,它很接近事件.可以理解为,当DOM发生变 ...

html5新特性

这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

HTML5新特性之CSS+HTML5实例

1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. 同时字符集声明也被简化了:

HTML5新特性：FileReader 和 FormData

连接在这里: HTML5新特性:FileReader 和 FormData

web全栈架构师[笔记] — 03 html5新特性

HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

HTML5新特性：范围样式

原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做&lt ...

html5新特性与用法大全了解一下

有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

html5新特性contenteditable 属性更容易实现动态表单

介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域
类型的标签. conte ...

HTML5新特性之文件和二进制数据的操作 Blob对象

HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

随机推荐

使用Innosetup制作安装包的一些技巧

1. 选择安装界面上的图片 [Setup] ;设置界面上的两个图片 WizardImageFile=WizModernImage.bmp WizardSmallImageFile=WizSmallIm ...

PHPExcel用法有感

今日项目需求导出excel.我用最简单的header头方式导出了,但是需求部门退回了,说不满足他们的需求,需要我按照他们的模板来导出. 然后想到了PHPExcel,没用过,走了不少弯路. 1.去官网下 ...

转载收藏之用 - 微信公众平台开发教程(五)：使用Senparc.Weixin.MP SDK

Senparc.Weixin.MP SDK已经涵盖了微信5.0的所有公共API,以及2013年10月29日升级之后大部分实用的接口. 整个项目的源代码以及已经编译好的程序集可以在这个项目中获取到:ht ...

一个linux常见命令的列表

这是一个linux常见命令的列表. 那些有• 标记的条目,你可以直接拷贝到终端上而不需要任何修改,因此你最好开一个终端边读边剪切&拷贝. 所有的命令已在Fedora和Ubuntu下做了测试 命 ...

Laravel中使用Redis

安装PHP PRedis PRedis是laravel访问redis的扩展包,只需要下载原码即可,不需要安装PHP扩展(如php-redis.so).但在这之前需要了解一个composer,因为lar ...

git远程提交失败

同步仓库并解决403报错 这时候对本地仓库和github进行同步 # git push -u origin master error: The requested URL returned error ...

Python学习笔记，day3

Python学习第三天 一.集合 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 常用操作: s = ...

laravel 默认所有请求带session解决办法

laravel  app/Http/Kernel.php protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware\Encr ...

JavaBasic_11

Object默认的实现是比较对象的地址 Object默认的实现是比较对象的地址局部内部类 局部位置内部类:局部是指方法体中 1.可以直接访问外部类的成员(这个特征是所有内部类所共有) 2.可以创建内部 ...

MVC 5 Strongly Typed Views(强类型视图)

学习MVC这样久以来,发觉网站上很多MVC的视频或是文章,均是使用Strongly Type views来实现控制器与视图的交互.Insus.NET以前发布的博文中,也大量使用这种方式: