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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
|
---
title: DocumentFragment
slug: Web/API/DocumentFragment
translation_of: Web/API/DocumentFragment
---
<p>{{ ApiRef("DOM") }}</p>
<p><strong><span class="external"><code>DocumentFragment</code></span></strong> 介面表示了一個沒有父節點的最小化文件物件。<code>DocumentFragment</code> 被當作一種輕量化的 {{domxref("Document")}}，用如同標準文件一般的方式保存片段的文件結構（由節點組成）。關鍵的區別在於文件片段不是真實的 DOM 結構，文件片段的變動並不會影響目前的網頁文件，也不會導致回流（{{Glossary("reflow")}}）或引起任何影響效能的情況發生。</p>
<p>一般的用法是建立一個 <code>DocumentFragment</code> 物件，在此物件中組織一個 DOM 的子樹。再使用 {{domxref("Node")}} 介面定義的方法，如 {{domxref("Node.appendChild", "appendChild()")}} 或 {{domxref("Node.insertBefore", "insertBefore()")}} 將這個文件片段加入或插入目前頁面的 DOM 當中。執行這個將文件片段中的節點置入 DOM 的動作之後，會留下一個空的 <code>DocumentFragment</code> 物件（只會插入物件中的節點，<code>DocumentFragment</code> 物件本身不會被插入）。由於文件片段中的所有節點是一次性的被插入目前頁面文件當中，故回流及頁面渲染只會被觸發一次，所以可用插入 <code>DocumentFragment</code> 物件的方式取代傳統分別插入多個節點至 DOM（將節點一個一個分次進行插入）的操作方式。</p>
<p>此介面也適合與 Web components 搭配使用：{{HTMLElement("template")}} 元素在其 {{domxref("HTMLTemplateElement.content")}} 屬性中便包含了一個 <code>DocumentFragment</code> 物件。</p>
<p>可使用 {{domxref("document.createDocumentFragment()")}} 方法或 <code>DocumentFragment</code> 的建構式來建立一個空的 <code>DocumentFragment</code> 物件。</p>
<h2 id="Specification" name="Specification">屬性</h2>
<p><em>This interface has no specific properties, but inherits those of its parent, </em><em>{{domxref("Node")}}, and implements those of the {{domxref("ParentNode")}} interface.</em></p>
<dl>
<dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of the <code>DocumentFragment</code> object.</dd>
<dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Returns the {{domxref("Element")}} that is the first child of the <code>DocumentFragment</code> object, or <code>null</code> if there is none.</dd>
<dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Returns the {{domxref("Element")}} that is the last child of the <code>DocumentFragment</code> object, or <code>null</code> if there is none.</dd>
<dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Returns an <code>unsigned long</code> giving the amount of children that the <code>DocumentFragment</code> has.</dd>
</dl>
<h2 id="建構式">建構式</h2>
<dl>
<dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
<dd>Returns an empty <code>DocumentFragment</code> object.</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>This interface inherits the methods of its parent, {{domxref("Node")}}<em>, and implements those of the {{domxref("ParentNode")}} interface</em></em><em>.</em></p>
<dl>
<dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt>
<dd>Returns the first matching {{domxref("Element")}} in the tree of the <code>DocumentFragment</code>.</dd>
<dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt>
<dd>Returns a {{domxref("NodeList")}} of matching {{domxref("Element")}} in the tree of the <code>DocumentFragment</code>.</dd>
<dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
<dd>Returns the first {{domxref("Element")}} node within the <code>DocumentFragment</code>, in document order, that matches the specified selectors.</dd>
<dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
<dd>Returns a {{domxref("NodeList")}} of all the {{domxref("Element")}} nodes within the <code>DocumentFragment</code> that match the specified selectors.</dd>
</dl>
<dl>
<dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
<dd>Returns the first {{domxref("Element")}} node within the <code style="font-size: 14px;">DocumentFragment</code>, in document order, that matches the specified ID.</dd>
</dl>
<h2 id="Specifications" name="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', '#interface-documentfragment', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td>
<td>{{Spec2('Selectors API Level 2')}}</td>
<td>Added the <code>find()</code> and <code>findAll()</code> methods.</td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
<td>{{Spec2('Selectors API Level 1')}}</td>
<td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>No change from {{SpecName('DOM2 Core')}}</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM2 Core')}}</td>
<td>No change from {{SpecName('DOM1')}}</td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</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>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>8.0</td>
<td>10.0</td>
<td>3.2 (525.3)</td>
</tr>
<tr>
<td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
<td>28.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("24.0")}}</td>
<td>{{CompatNo}}</td>
<td>15.0</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>ParentNode</code> properties {{experimental_inline}}</td>
<td>28.0</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("25.0")}}</td>
<td>{{CompatNo}}</td>
<td>15.0</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>ParentNode</code> methods {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</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>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
<td>2.1</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>8.0</td>
<td>10.0</td>
<td>3.2 (525.3)</td>
</tr>
<tr>
<td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("24.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>ParentNode</code> properties {{experimental_inline}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("25.0")}}</td>
<td>{{CompatNo}}</td>
<td>5.0</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>ParentNode</code> methods {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="參見">參見</h2>
<ul>
<li><a href="/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li>
</ul>
|
