js实现监听dom元素的属性变化

通过MutationObserver来实现：

MutationObserver可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个<p>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

使用方式：

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

var targetNode = $('#content')[0];或者var targetNode = document.getElementById("content")

2.MutationObserver是有构造函数

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

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

参数mutationsList中包含以下属性：

type：观察的变动类型（attribute、characterData或者childList）。target：发生变动的DOM节点。addedNodes：新增的DOM节点。removedNodes：删除的DOM节点。previousSibling：前一个同级节点，如果没有则返回null。nextSibling：下一个同级节点，如果没有则返回null。attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

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

3. MutationObserver 的实例方法

3.1：使用observe方法监听属性变化，

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

mutationObserver.observe(targetNode, options );

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

变动类型有以下几种：

childList：子节点的变动（指新增，删除或者更改）。attributes：属性的变动。characterData：节点内容或节点文本的变动。subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。

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

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

实例：

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);