陈建华的博客
专注web开发
js实现监听dom元素的属性变化
2020-03-19 10:30:39   阅读818次

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

所支持的浏览器版本:

2019072420241785.png




-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
1楼:cameljjh 发表于 2020-03-27 11:42:47
很多内容需要密码,博主怎么提供?谢谢了
2楼:cameljjh 发表于 2020-03-27 11:43:26
能否留下联系方式,或联系我:微信&电话:181600228722
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航