files/zh-tw/web/api/document/createdocumentfragment/index.html


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

---
title: Document.createDocumentFragment()
slug: Web/API/Document/createDocumentFragment
tags:
  - API
  - DOM
  - 參考
  - 文本片段
  - 方法
translation_of: Web/API/Document/createDocumentFragment
---
<div>{{ApiRef("DOM")}}</div>

<p>建立新的 {{domxref("DocumentFragment")}}.</p>

<h2 id="語法">語法</h2>

<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
</pre>

<p><code>fragment </code>是 {{domxref("DocumentFragment")}} 的一個參考物件。</p>

<h2 id="描述">描述</h2>

<p><code>DocumentFragment</code>s 是 DOM 節點(Nodes)。他們不會成為 DOM主幹的一部份。最常見的作法是先建立文本片段 (document fragment)，然後將元素 (element) 加入文本片段中，最後再將文本片段加入 DOM 樹中。在 DOM 樹中，文本片段將會被他所有的子元素取代。</p>

<p>正因為文本片段是存在<strong>記憶體</strong>中，並且不是 DOM 主幹的一部分，增加子元素並不會導致網頁重刷 (<a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a>)(重新計算元素的位置和幾何)。因此採用文本片段通常會有比較好的效能表現 (<a href="http://ejohn.org/blog/dom-documentfragments/">better performance</a>)。</p>

<h2 id="舉例">舉例</h2>

<p>這個例子中用清單來呈現主流瀏覽器。</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;ul id="ul"&gt;
&lt;/ul&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);
</pre>

<h3 id="結果">結果</h3>

<p>在 <a href="https://jsfiddle.net/a0nn690f/">jsfiddle </a>上看範例結果。</p>

<h2 id="規格">規格</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-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition in the DOM 1 specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特色</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基礎支援</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特色</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>Edge</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基礎支援</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="更多參考">更多參考</h2>

<ul>
 <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
 <li>{{domxref("documentFragment")}}</li>
</ul>