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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: document.createTreeWalker()
slug: Web/API/Document/createTreeWalker
tags:
- API
- DOM
- Reference
- 方法 遍历 迭代器
translation_of: Web/API/Document/createTreeWalker
---
<div>{{ApiRef("Document")}}</div>
<p><strong><code>document.createTreeWalker()</code></strong> 方法,能创建并返回一个 {{domxref("TreeWalker")}} 对象。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>);
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code><em>root </em></code></dt>
<dd>是遍历这个 {{domxref("TreeWalker")}} 的根节点(root {{domxref("Node")}})。通常这是文档的一个元素。</dd>
<dt><em>whatToShow {{optional_inline}}</em></dt>
<dd>一个无符号长整型,表示一个整合自 <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code> 常量属性的位掩码。这是筛选特定类型节点的便捷方式。默认为 0xFFFFFFFF,表示 <code>SHOW_ALL</code> 常量。
<table class="standard-table">
<tbody>
<tr>
<td class="header">常量</td>
<td class="header">数值</td>
<td class="header">描述</td>
</tr>
<tr>
<td><code>NodeFilter.SHOW_ALL</code></td>
<td><code>-1</code> (that is the max value of <code>unsigned long</code>)</td>
<td>显示所有节点。</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
<td><code>2</code></td>
<td>显示特性{{ domxref("Attr") }}节点。这只在当以一个特性节点{{ domxref("Attr") }}为起点节点的{{ domxref("TreeWalker") }} 中有意义;在这种情况下,这意味着特性节点会出现在迭代或遍历第一次出现的位置。因为特性节点没有其他节点一样的子节点,所以在文档树中的遍历不会出现特性节点。</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
<td><code>8</code></td>
<td>显示CDTA {{domxref("CDATASection")}} 节点.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_COMMENT</code></td>
<td><code>128</code></td>
<td>显示注释{{domxref("Comment")}}节点</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_DOCUMENT</code></td>
<td><code>256</code></td>
<td>显示文档{{domxref("Document")}}节点</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_DOCUMENT_FRAGMENT</code></td>
<td><code>1024</code></td>
<td>显示文档片段{{domxref("DocumentFragment")}}节点</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_DOCUMENT_TYPE</code></td>
<td><code>512</code></td>
<td>显示文档类型{{domxref("DocumentType")}}节点</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_ELEMENT</code></td>
<td><code>1</code></td>
<td>显示元素{{domxref("Element")}}节点</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_ENTITY</code> {{deprecated_inline}}</td>
<td><code>32</code></td>
<td>显示实体{{domxref("Entity")}}节点。This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Entity") }} node as its root; in this case, it means that the {{ domxref("Entity") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
<td><code>16</code></td>
<td>显示实体引用 {{ domxref("EntityReference") }} 节点。</td>
</tr>
<tr>
<td><code><code><code>NodeFilter.</code></code>SHOW_NOTATION</code> {{deprecated_inline}}</td>
<td><code>2048</code></td>
<td>显示符号{{ domxref("Notation") }} 节点。 This is meaningful only when creating a {{ domxref("TreeWalker") }} with a {{ domxref("Notation") }} node as its root; in this case, it means that the {{ domxref("Notation") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_PROCESSING_INSTRUCTION</code></td>
<td><code>64</code></td>
<td>显示处理指令 {{ domxref("ProcessingInstruction") }}节点。</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_TEXT</code></td>
<td><code>4</code></td>
<td>顯示文字節點({{ domxref("Text") }} nodes).</td>
</tr>
</tbody>
</table>
</dd>
<dt><em>filter <em>{{optional_inline}}</em></em></dt>
<dd>一个可选的 {{domxref("NodeFilter")}},即一个具有 <code>acceptNode</code> 方法的对象,此方法被 {{domxref("TreeWalker")}} 调用以决定是否接受已通过 <code>whatToShow</code> 检查的节点。</dd>
<dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt>
<dd>一个 {{domxref("Boolean")}} 标识,指示当丢弃一个 {{domxref("EntityReference")}} 时是否同时丢弃其子树。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>一个新的 {{domxref("TreeWalker")}} 对象。</p>
<h2 id="Example" name="Example">示例</h2>
<p>以下示例遍历 body 下的所有节点,将节点集合缩小至元素,简单地传递每个可接受的节点(也可在 <code>acceptNode()</code> 方法中缩小集合),然后利用创建的 TreeWalker 迭代器在节点上推进(现在是所有的元素)并把它们推入一个数组。</p>
<pre>var treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{ acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
false
);
var nodeList = [];
var currentNode = treeWalker.currentNode;
while(currentNode) {
nodeList.push(currentNode);
currentNode = treeWalker.nextNode();
}</pre>
<h2 id="Specification" name="Specification">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Removed the <code>expandEntityReferences</code> parameter.<br>
Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
<td>{{Spec2('DOM2 Traversal_Range')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.Document.createTreeWalker")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>该函数创建的接口对象:{{domxref("TreeWalker")}}。</li>
</ul>
|