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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
|
---
title: Document.createTreeWalker()
slug: Web/API/Document/createTreeWalker
translation_of: Web/API/Document/createTreeWalker
original_slug: 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>
<em>root </em></dt>
<dd>
是這個 {{domxref("TreeWalker")}} 遍歷的根節點(root {{domxref("Node")}}). Typically this will be an element owned by the document.</dd>
<dt>
<em>whatToShow {{optional_inline}}</em></dt>
<dd>
Is an optional <code>unsigned long</code> representing a bitmask created by combining the constant properties of <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>. 它是一種方便的方法，用來過濾某些類型的節點。 It defaults to <code>0xFFFFFFFF</code> representing the <code>SHOW_ALL</code> constant.<br>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Constant</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>Shows attribute {{ domxref("Attr") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Attr") }} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
<td><code>8</code></td>
<td>Shows {{ domxref("CDATASection") }} nodes.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_COMMENT</code></td>
<td><code>128</code></td>
<td>Shows {{ domxref("Comment") }} nodes.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_DOCUMENT</code></td>
<td><code>256</code></td>
<td>Shows {{ domxref("Document") }} nodes.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_DOCUMENT_FRAGMENT</code></td>
<td><code>1024</code></td>
<td>Shows {{ domxref("DocumentFragment") }} nodes.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_DOCUMENT_TYPE</code></td>
<td><code>512</code></td>
<td>Shows {{ domxref("DocumentType") }} nodes.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_ELEMENT</code></td>
<td><code>1</code></td>
<td>Shows {{ domxref("Element") }} nodes.</td>
</tr>
<tr>
<td><code><code>NodeFilter.</code>SHOW_ENTITY</code> {{deprecated_inline}}</td>
<td><code>32</code></td>
<td>Shows {{ domxref("Entity") }} nodes. 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>Shows {{ domxref("EntityReference") }} nodes.</td>
</tr>
<tr>
<td><code><code><code>NodeFilter.</code></code>SHOW_NOTATION</code> {{deprecated_inline}}</td>
<td><code>2048</code></td>
<td>Shows {{ domxref("Notation") }} nodes. 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>Shows {{ domxref("ProcessingInstruction") }} nodes.</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>
Is a {{domxref("Boolean")}} flag indicating if when discarding an {{domxref("EntityReference")}} its whole sub-tree must be discarded at the same time.</dd>
</dl>
<h2 id="Example" name="Example">Example</h2>
<p>The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the <code>acceptNode()</code> method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.</p>
<pre class="brush: js">var treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{ acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
false
);
var nodeList = [];
while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
</pre>
<h2 id="Specification" name="Specification">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.8.1")}}</td>
<td>9.0</td>
<td>9.0</td>
<td>3.0</td>
</tr>
<tr>
<td><code>whatToShow</code> and <code>filter</code> optional</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("12")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>3.0</td>
</tr>
<tr>
<td><code>expandEntityReferences</code> {{obsolete_inline}}</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.8.1")}}<br>
Removed in {{CompatGeckoDesktop("12")}}</td>
<td>9.0</td>
<td>9.0</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.8.1")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9.0</td>
<td>3.0</td>
</tr>
<tr>
<td><code>whatToShow</code> and <code>filter</code> optional</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("12")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>3.0</td>
</tr>
<tr>
<td><code>expandEntityReferences</code> {{obsolete_inline}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.8.1")}}<br>
Removed in {{CompatGeckoDesktop("12")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9.0</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>The interface of the object it creates: {{domxref("TreeWalker")}}.</li>
<li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker on MSDN</a></li>
</ul>
|
