DOM3 新增规范 MutationObserver的基本使用

MutationObserver

构造函数

MutationObserver()
在通过new 调用该构造函数的时候，需要传入一个回调函数callback当做参数，这个callback的详细说明如下：

1. 参数
   mutationsList：描述所有被触发改动的 MutationRecord 对象数组
   observer:调用该函数的MutationObserver 对象，也就是观察器实例对象

2. 返回值
   返回一个新的 MutationObserver（观察器实例对象）

3. 触发时机
   当被观察的节点或子树以及配置项有Dom变动时会被调用

实例方法

disconnect()
阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。

observe()
配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。

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

一个小的demo

// 选择要观察的dom节点
const targetNode = document.getElementById('demo');

// 需要观察demo节点的哪些变动做出响应
const config = {
	attributes: true,
	childList: true,
	subTree: true
}

// 当观察到变动的时候需要做什么（执行的回调函数）
const callback = (mutationsList, observer) => {
	for (let mutation of mutationsList) {
		if (mutation.type === 'childList') {
			console.log('demo节点的子节点变化了')
		}
		if (mutation.type === 'attributes') {
			console.log('demo节点的属性变化了')
		}
	}
}

// 创建观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 开始进行监听
observer.observe(targetNode, config);

// 功能演示：当观察节点的属性和子节点发生变化时会监听到改变并触发回调函数
targetNode.style.width = '100px';
targetNode.style.height = '100px';
targetNode.style.background = 'red';
const span = document.createElement('span');
span.innerHTML = '你好啊，李银河';
targetNode.appendChild(span);