1. 首先确定所要监听的属性变化的dom节点

通过来实现：

可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个

元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

使用方式：

1. 首先确定所要监听的属性变化的dom节点 ：

var = $('#')[0];或者var = .("")

2.是有构造函数

定义个回调函数（这个回调函数接受两个参数：第一个是变动数组，第二个是观察器实例）

function callback(mutationsList, observer) {console.log(mutationsList);console.log(observer);console.log(111111111);
}

参数中包含以下属性：

然后创建实例： var = new ();

3. 的实例方法 3.1：使用方法监听属性变化，

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

.(, );

方法接受两个参数，第一个是监听的DOM元素，第二个是监听的变动类型（子节点变动和属性变动）。

变动类型有以下几种：

想要观察哪一种变动类型，就在对象中指定它的值为true。需要注意的是，必须同时指定、和中的一种或多种，若未均指定将报错。

这里需要注意一下：对一个节点添加观察器，就像使用方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。但是，如果指定不同的对象，就会被当作两个不同的观察器，这样就会触发回调。

实例：

var targetNode = $('#content')[0];//content监听的元素id
//options：监听的属性
var options = { attributes: true, childList: true,subtree:true,attributeOldValue:true};
//回调事件
function callback(mutationsList, observer) {console.log(mutationsList);console.log(observer);console.log(111111111);
}
var mutationObserver = new MutationObserver(callback);
mutationObserver.observe(targetNode, options);

3.2 ：()，（）方法

用于停止对dom元素的观察。使用该方法后，不管dom元素怎么改变，都不会触发回调函数

mutationObserver.disconnect();

方法用来清除变动记录，返回变动记录的数组。

var changes = mutationObserver.takeRecords();
console.log(changes);

所支持的浏览器版本：