1
2
3
4
5
6
7
8
9
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: MutationObserverInit.attributeFilter
slug: conflicting/Web/API/MutationObserver/observe
tags:
- API
- DOM
- DOM WHATWG
- Mutation Observers
- MutationObserverInit
- 变化
- 属性
- 属性过滤器
- 监听器
translation_of: Web/API/MutationObserverInit/attributeFilter
original_slug: Web/API/MutationObserverInit/attributeFilter
---
<div>{{APIRef("DOM WHATWG")}}</div>
<p><span class="seoSummary"><strong>{{domxref("MutationObserverInit")}}</strong> 字典的可选属性 <strong><code>attributeFilter</code></strong> 是一个字符串数组，用于指定要</span>监听<span class="seoSummary">变化的属性名称。</span> 如果指定了该属性，则 {{domxref("MutationObserverInit.attributes", "attributes")}} 无论是否为 <code>true</code>，属性监听都将启用。</p>
<p>如果属性 {{domxref("MutationObserverInit.attributes", "attributes")}} 设置为 <code>true</code> ，但options对象中未包含 <code>attributeFilter</code> ，则所有属性的变化都会被监听。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">var <em>options</em> = {
<em>attributeFilter</em>: [ <em>"list"</em>, <em>"of"</em>, <em>"attribute"</em>, <em>"names"</em> ]
}
</pre>
<h3 id="值">值</h3>
<p>{{domxref("DOMString")}}数组， 每项指定一个要监听其变化的属性名称，没有默认值。</p>
<p>当使用构造函数{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}创建<code>MutationObserver</code>对象时，如果options对象中存在该属性，则无论{{domxref("MutationObserverInit.attributes", "attributes")}}是否为<code>true</code>，都将启用属性监听。</p>
<h2 id="示例">示例</h2>
<p>在本示例中，设置了一个变化监听器来监听用于显示聊天室用户名的子树中所有元素的<code>status</code>和<code>username</code>属性的变化。这样就可以反应用户昵称或状态的更改， 例如，可以将用户标记为离开或离线。</p>
<pre class="brush: js notranslate">function callback(mutationList) {
mutationList.forEach(function(mutation) {
switch(mutation.type) {
case "attributes":
switch(mutation.attributeName) {
case "status":
userStatusChanged(mutation.target.username, mutation.target.status);
break;
case "username":
usernameChanged(mutation.oldValue, mutation.target.username);
break;
}
break;
}
});
}
var userListElement = document.querySelector("#userlist");
var observer = new MutationObserver(callback);
observer.observe(userListElement, {
attributeFilter: [ "status", "username" ],
attributeOldValue: true,
subtree: true
});</pre>
<p><code>callback()</code>函数将在监听器启动时传给{{domxref("MutationObserver.observe", "observe()")}}方法，用来检查{{domxref("MutationRecord")}}对象的每一项。对于代表属性更改的任何项（可以通过{{domxref("MutationRecord.type")}}的值为“ <code>attributes</code>”的值来检测），我们使用通过{{domxref("MutationRecord.attributeName")}}获得的属性名称来识别发生的更改的类型，然后将其分派给适当的处理函数。</p>
<p>请注意，在查找本地用户数组时可以使用{{domxref("MutationRecord.oldValue")}}来获取<code>username</code>的上一个值。</p>
<p>当observe()被调用时， options对象中指定了<code>attributeFilter</code>和{{domxref("MutationObserverInit.subtree", "subtree")}}，所以id为“<code>userlist</code>”的元素的所有子树的所有节点的属性值都会被监听。{{domxref("MutationObserverInit.attributeOldValue", "attributeOldValue")}}被设置为<code>true</code>，因为我们希望在监听到值变化时可以获取到上一个值。</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-mutationobserverinit-attributefilter', 'MutationObserverInit: attributeFilter')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<p>{{Compat("api.MutationObserverInit.attributeFilter")}}</p>
</div>
|
