HTML5 特性之 Mutation Observer_html/css_WEB-ITnose

前言

上周某业务 App 中页面被劫持，看到这个我想到两个分享，一个是第一届 FEDay 上石玉磊 @ 腾讯有分享如何做的问题，第二个是在朋友圈看到 @ 糖饼分享的方案。 结合这两个有了今天的这个 API 的分享。感谢 @ 草根程序猿 的博文。文末有疑惑解答！！

正文从这开始～

1 、概述

Mutation Observer （变动观察器）是监视 DOM 变动的接口。当 DOM 对象树发生任何变动时， Mutation Observer 会得到通知。

要概念上，它很接近事件。可以理解为，当 DOM 发生变动会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说 DOM 发生变动立刻会触发相应的事件； Mutation Observer 则是异步触发， DOM 发生变动以后，并不会马上触发，而是要等到当前所有 DOM 操作都结束后才触发。

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

注：在控制台可看到 log

Mutation Observer 有以下特点：

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

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

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

目前， Firefox(14+) 、 Chrome(26+) 、 Opera(15+) 、 IE(11+) 和 Safari(6.1+) 支持这个 API 。 Safari 6.0 和 Chrome 18-25 使用这个 API 的时候，需要加上 WebKit 前缀（ WebKitMutationObserver ）。可以使用下面的表达式检查浏览器是否支持这个 API 。

2 、使用方法

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

2.1 observer 方法

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

上面代码首先指定，所要观察的 DOM 元素提 article ，然后指定所要观察的变动是子元素的变动和属性变动。最后，将这两个限定条件作为参数，传入 observer 对象的 observer 方法。

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'] ）。

2.2 disconnect 方法和 takeRecord 方法

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

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

2.3 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 。

3 、实例

3.1 子元素的变动

下面的例子说明如果读取变动记录。

上面代码的观察器，观察 body 元素的所有下级元素（ childList 表示观察子元素， subtree 表示观察子元素的下级元素）的变动。回调函数会在控制台显示所有变动的类型和目标元素。

3.2 、属性的变动

下面的例子说明如何追踪属性的变动。

上面代码先设定追踪属性变动（ 'attributes':true ），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。

后语

更多可以参考 MDN ： https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

关于本文

作者： @ 草根程序员

原文链接： http://www.cnblogs.com/jscode/p/3600060.html

昨天早读君有发了三个问题，@豆腐童鞋针对@小幸运问题进行解答，非常感谢。

@ 小幸运。： 我是在公司实习了两个月了，但是由于刚出学校，技术，经验都不是很好，慢慢喜欢的前端都觉得有些不太喜欢了。这种情况怎么办？

@豆腐（ 华农大学、百度前端实习生 ）：实习两个月的也有时有这样想法的 +1 。其实这种情况我自己总结了一下觉得大概有两点。一是刚进公司的新奇感消失了，每天都在做业务久而久之就觉得无聊不想做，另一个可能是在业务上遇到自己太多不会的，对自己的技术水平产生了怀疑，想放弃实习回去进一步进修。 我自己的解决办法是周末的时候做一些自己想做的事情，抛下业务去寻找前端的乐趣。比如画一个动画，看看博客分享然后对里面的疑问实践一下，找一些面试题笔试题看看有什么不会的去学习下 … 然后内心给自己打一针鸡血，告诉自己要奋斗要努力要好好打代码，这样大概周一上班的时候就会想，好！这周要好好奋斗！嗯