# MutationObserver

MutationObserver从字面上含义就是发现突变。它可以监听页面的DOM元素是否发生了变化，然后给出通知。

# 构造方法

new MutationObserver(callback)

callback，当每次DOM发生变化的时候都会触发callback，大家也许就会问，那要是频繁修改dom，那这个callback就会频繁触发，性能上怎么办？实际上，MutationObserver并不是每次dom发生变化的时候立即触发，还是等所有的dom操作完成之后一次执行，也就是说它是异步的。

举个栗子：

<body>
  <ul id="container"></ul>
</body>

1
2
3

// js
var callback = function() {
	console.log("Dom changed");
};
var mutationObserver = new MutationObserver(callback);
var options = {
	subtree: true,
	childList: true
};
mutationObserver.observe(document.body, options);
window.onload = function() {
	for (var i = 0; i < 100; i++) {
		var li = document.createElement("li");
		li.innerText = "这是";
		document.getElementById("container").appendChild(li);
	}
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

我们向DOM元素中插入了10次，实际上oberve只执行了一次，是在所有的dom操作完成之后触发的。

# 实例方法

mutationObserver实例有三个方法。

observe(target,options) //给制定的DOM注册一个事件，如果DOM发生变化就会发送通知。target是目标元素，比如body，options是配置哪写dom发生变化时才发送通知

disconnect(); //终止监听DOM变化，直到重新实例化

takeRecords() //清除变动记录，即不再监听还没发生的DOM变化

# 实例化配置

childList：设置为true表示监听指定元素的子元素的变动;

attributes:设置为true表示监听指定元素的属性的变动；

characterData：设置为true表示监听指定元素的data变动;

subtree:设置为true表示不紧监听目标元素也同时监听其子元素变动；

attributeOldValue：在attributes属性已经设为true的前提下,如果需要将发生变化的属性节点之前的属性值记录下来(记录到下面MutationRecord对象的oldValue属性中),则设置为true；

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

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

// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

// 选择目标节点
var target = document.querySelector('#some-id');

// 创建观察者对象
var observer = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		console.log(mutation.type);
	});
});

// 配置观察选项:
var config = {
	attributes: true,
	childList: true,
	characterData: true
}

// 传入目标节点和观察选项
observer.observe(target, config);

// 随后,你还可以停止观察
observer.disconnect();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

← meta viewport原理面向对象和原型链 →