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