参考：https://www.softwhy.com/HTML5/MutationObserver_course/
JavaScript监听属性改变
原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。
关于Mutation Observer基本知识可以参阅以下两篇文章：
（1）.Mutation Observer优点一章节。
（2）.Mutation Observer用法一章节。
下面通过代码实例介绍一下如何监听attributes的变动，也就是监听子节点的变动。
代码实例如下：
[HTML] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!doctype html><html><head><meta charset="utf-8"><title>蚂蚁部落</title><script>window.onload = function () { var ul = document.querySelector("ul"); var Observer = new MutationObserver(function (mutations, instance) { console.log(mutations); console.log(instance); mutations.forEach(function (mutation) { console.log(mutation); }); }); Observer.observe(ul, { attributes: true }); ul.setAttribute("class", "a"); ul.setAttribute("class", "b"); ul.removeAttribute("class");}</script></head><body><div id="box"> <ul> <li>蚂蚁部落</li> </ul></div></body></html> |
下面对代码进行一下分析，首先看运行控制台截图：
当其他所有脚本代码都执行完毕之后，MutationObserver构造函数的回调函数才会被执行。
构造函数的第一个数组参数用来存放所有的变化，每一个成员都是MutationRecord类型。
[JavaScript] 纯文本查看 复制代码
|
1
2
3
|
Observer.observe(ul, { attributes: true //监听属性节点的变化}); |
规定监听器将监听ul元素属性节点的变化。
[JavaScript] 纯文本查看 复制代码
|
1
|
ul.setAttribute("class", "a") |
为ul元素添加一个class属性，并设置属性值为a；动作将被记录在mutations数组中。
[JavaScript] 纯文本查看 复制代码
|
1
|
ul.setAttribute("class", "b") |
修改ul元素原来class属性值为b；动作将被记录在mutations数组中。
[JavaScript] 纯文本查看 复制代码
|
1
|
ul.removeAttribute("class"); |
删除ul元素上的class属性；动作将被记录在mutations数组中。
MutationRecord对象，直接看控制台截图：
监听指定属性的改变：
如果不指定监听哪些属性，那么所有属性的改变都在监听范围之内。
Mutation Observer提供了监听指定属性的功能，代码实例如下:
[HTML] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!doctype html><html><head><meta charset="utf-8"><title>蚂蚁部落</title><script>window.onload = function () { var ul = document.querySelector("ul"); var Observer = new MutationObserver(function (mutations, instance) { console.log(mutations); console.log(instance); mutations.forEach(function (mutation) { console.log(mutation); }); }); Observer.observe(ul, { attributes: true, attributeFilter: ["class"] }); ul.setAttribute("class", "a"); ul.setAttribute("ant", "b");}</script></head><body><div id="box"> <ul> <li>蚂蚁部落</li> </ul></div></body></html> |
上面代码只会监听class属性的变化。
attributeFilter属性值是一个数组，可以规定要监听的属性名称。