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

---
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>

{{Compat("api.Document.createDocumentFragment")}}

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

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