强大的DOM变化观察者MutationObserver

在这以前 DOM3 提供了 Mutation events 事件

1. DOMAttrModified
2. DOMAttributeNameChanged
3. DOMCharacterDataModified
4. DOMElementNameChanged
5. DOMNodeInserted
6. DOMNodeInsertedIntoDocument
7. DOMNodeRemoved
8. DOMNodeRemovedFromDocument
9. DOMSubtreeModified

能够监听到属性、文本内容、节点插入删除、子节点变化等事件。但是该事件 W3C 已废弃，虽然一些浏览器仍然支持，但不建议使用。

MutationObserver目前IE11+及其它浏览器最新版本都已支持。能够经过如下代码判断是否支持

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

var supportMutationObserver = !!MutationObserver;

 

使用以下

var mo = new MutationObserver(callback);
var div = document.querySelector('div');

var options = {
    'childList': true,
    'arrtibutes': true
};

mo.observer(div, options);

 

options 是配置参数，这里的配置能够观察到 div 元素的子元素和属于变更。

options 有以下选项

1. childList: 子元素的变更
2. attributes: 属性的变更
3. characterData: 节点内容或节点文本的变更
4. subtree: 全部下属节点（包括子节点和子节点的子节点）的变更
5. attributeOldValueL: 值为true或者为false。若是为true，则表示须要记录变更前的属性值
6. characterDataOldValue: 值为true或者为false。若是为true，则表示须要记录变更前的数据值
7. attributesFilter: 值为一个数组，表示须要观察的特定属性（好比['class', 'str']）

 

当变更发生时回调函数会将变更记录 MutationRecord 对象传入，MutationRecord 包含了 DOM 的相关信息，有以下属性

1. type: 观察的变更类型（attribute、characterData或者childList）
2. target: 发生变更的DOM对象
3. addedNodes: 新增的DOM对象
4. removeNodes: 删除的DOM对象
5. previousSibling: 前一个同级的DOM对象，若是没有则返回null
6. nextSibling: 下一个同级的DOM对象，若是没有就返回null
7. attributeName: 发生变更的属性。若是设置了attributeFilter，则只返回预先指定的属性
8. oldValue: 变更前的值。这个属性只对attribute和characterData变更有效，若是发生childList变更，则返回null

 

示例1：观察子元素的变更

function callback(records) {
  records.forEach(function(record) {
    console.log(record)
  })
}
var ob = new MutationObserver(callback)
ob.observe(app1, {
  childList: true,
  subtree: true
})

p1

app1

配置项 childList 表示观察子元素，subtree 表示观察子元素的下级元素。在本页面的浏览器控制台输入如下代码分别测试

app1.removeChild(p1)

app1.appendChild(document.createTextNode('TEST'))

 

 

示例2：观察属性的变化

function callback2(records) {
  records.forEach(function(record) {
    console.log(record)
  })
}
var ob2 = new MutationObserver(callback2)
ob2.observe(app2, {
  attribute: true,
  attributeOldValue: true
})

app2

配置参数跟踪属性变更（'attributes': true），而后设定记录变更前的值。实际发生变更时，会将变更前的值显示在控制台。打开本页面的浏览器控制台，输入如下代码测试

app2.id = 'apptest'

 

示例3：观察文本元素的变化

function callback3(records) {
  records.forEach(function(record) {
    console.log(record)
  })
}
var ob3 = new MutationObserver(callback3)
ob3.observe(app3, {
  characterData: true
})

 

示例3：观察元素内容的变更

function callback3(records) {
  records.forEach(function(record) {
    console.log(record)
  })
}
var ob3 = new MutationObserver(callback3)
ob3.observe(app3, {
  childList: true,
  characterData: true,
  characterDataOldValue: true
})

old value

 

配置项会观察元素文本的变化，当变更时会记录老的文本元素。打开本页面的浏览器控制台，输入如下代码测试

app3.appendChild(document.createTextNode(' hello'))

 

相关：

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

https://dev.opera.com/articles/mutation-observers-tutorial/

http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html