MutationObserver HTML5 API

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

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

注:Mutation Observer 是异步触发,DOM 的变动并不会马上触发,而是要等到当前所有 DOM 操作都结束后才触发。这样设计是为了应付 DOM 频繁变动的特点,举例来说,如果文档中连续插入1000个<div>元素,就会连续触发1000个插入事件,执行每个事件的回调函数,这很可能造成浏览器的卡顿;而 Mutation Observer 不同,它只在1000个<div>都插入结束后才会触发,而且只触发一次。

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。

这篇文章目前没有评论。

回复

(必填项)

(必填项)

(可选)