html5 observer api,MutationObserver HTML5 API

MutationObserver接口用来监视DOM树的更改，DOM树的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个API都能得到通知。

MutationObserver是在DOM4中定义，被设计用来替代在DOM3 Events规范中定义的MutationEvent接口。

注：Mutation Observer 是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束后才触发。这样设计是为了应付 DOM 频繁变动的特点，举例来说，如果文档中连续插入1000个

元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 不同，它只在1000个

都插入结束后才会触发，而且只触发一次。

MutationEvent

该接口已经被废弃，不再推荐使用。尽管有些浏览器可能仍然支持它，但它可能已经从相关的Web标准中删除，可能正在被删除，或者可能只是出于兼容性目的而保留。

MutationEvent事件列表

总共有7种事件类型：

DOMAttrModified

DOMAttributeNameChanged

DOMCharacterDataModified

DOMElementNameChanged

DOMNodeInserted

DOMNodeInsertedIntoDocument

DOMNodeRemoved

DOMNodeRemovedFromDocument

DOMSubtreeModified

MutationEvent使用

可以使用EventTarget.AddEventListener()为Mutation Event注册侦听器，如下所示：

element.addEventListener("DOMNodeInserted", function (event) {

// ...

}, false);

MutationObserver

MutationObserver()是一个构造器，接受一个callback参数，用来处理节点变化的回调函数，返回两个参数，mutations：节点变化记录列表(sequence)，observer：构造MutationObserver对象。

var observe = new MutationObserver(function(mutations, observer){

});

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

var options = {

'childList': true,

'attributes':true

} ;

observer.observe(el, options);

// 创建并返回一个 MutationObserver 实例， 并侦听el元素的变动。

MutationObserver 的实例方法

observe()

指定所要观察的DOM元素，以及要观察的特定变动，启动监听。

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

var options = {

'childList': true,

'attributes':true

} ;

observer.observe(el, options);

该方法的第二个参数有如下可选属性

属性

类型

说明

childLIst

布尔值

观察目标节点的子节点的新增和删除。

attributes

布尔值

观察目标节点的属性节点(新增或删除了某个属性,以及某个属性的属性值发生了变化)。

characterData

布尔值

如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化

subtree

布尔值

观察目标节点的所有后代节点(观察目标节点所包含的整棵DOM树上的上述三种节点变化)

attributeOldValue

布尔值

在attributes属性已经设为true的前提下, 将发生变化的属性节点之前的属性值记录下来(记录到下面MutationRecord对象的oldValue属性中)

characterDataOldValue

布尔值

在characterData属性已经设为true的前提下,将发生变化characterData节点之前的文本内容记录下来(记录到下面MutationRecord对象的oldValue属性中)

attributeFilter

数组

一个属性名数组(不需要指定命名空间),只有该数组中包含的属性名发生变化时才会被观察到,其他名称的属性发生变化后会被忽略

disconnect()

停止 MutationObserver 实例对DOM变动的侦听，除非再次调用其observe()方法。

observer.disconnect();

takeRecords()

从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中。

// 保存所有没有被观察器处理的变动

var records = mutationObserver.takeRecords();

// 停止观察

mutationObserver.disconnect();

MutationRecord 对象

DOM 每次发生变化，就会生成一条变动记录(MutationRecord 实例)。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

MutationRecord对象包含了DOM的相关信息，有如下属性：

属性

说明

type

观察的变动类型(attribute、characterData或者childList)。

target

发生变动的DOM节点。

addedNodes

新增的DOM节点。

removedNodes

删除的DOM节点。

previousSibling

前一个同级节点，如果没有则返回null。

nextSibling

下一个同级节点，如果没有则返回null。

attributeName

发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。

oldValue

变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。