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

3.2 ：disconnect()，takeRecords（）方法

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

mutationObserver.disconnect();

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

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

 

所支持的浏览器版本：