参考：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属性值是一个数组，可以规定要监听的属性名称。