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
|
---
title: DocumentFragment
slug: Web/API/DocumentFragment
tags:
- API
- DOM
- DocumentFragment
- 参考
- 接口
translation_of: Web/API/DocumentFragment
---
<div>{{ APIRef("DOM") }}</div>
<p><strong><code>DocumentFragment</code>，文档片段</strong>接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 {{domxref("Document")}} 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的{{Glossary("reflow", "重新渲染")}}，且不会导致性能等问题。</p>
<p>最常用的方法是使用文档片段作为参数（例如，任何 {{domxref("Node")}} 接口类似 {{domxref("Node.appendChild")}} 和 {{domxref("Node.insertBefore")}} 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。</p>
<p>该接口在 Web 组件（Web components）中也非常有用：{{HTMLElement("template")}} 元素在其 {{domxref("HTMLTemplateElement.content")}} 属性中包含了一个 <code>DocumentFragment</code>。</p>
<p>可以使用{{domxref("document.createDocumentFragment")}} 方法或者构造函数来创建一个空的 <code>DocumentFragment</code>。</p>
<h2 id="Specification" name="Specification">属性</h2>
<p><em>该接口没有特殊的属性，其属性都继承自 {{domxref("Node")}} ，并补充了 {{domxref("ParentNode")}} 接口中的属性。</em></p>
<dl>
<dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>返回一个实时（live） {{domxref("HTMLCollection")}} ，包含所有属于 <code>DocumentFragment</code> 的{{domxref("Element","元素")}}类型的子对象。</dd>
<dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>返回 <code>DocumentFragment</code> 的第一个 {{domxref("Element")}} 类型的子对象，如果没有则返回 <code>null</code> 。</dd>
<dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>返回 <code>DocumentFragment</code> 的最后一个 {{domxref("Element")}} 类型的子对象，如果没有则返回 <code>null</code> 。</dd>
<dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>返回一个 <code>unsigned long</code> 给出 <code>DocumentFragment</code> 拥有的子项数量。</dd>
</dl>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
<dd>返回一个空的 <code>DocumentFragment</code> 对象。</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>该接口继承 {{domxref("Node")}} 的全部方法，<em>并实现了 {{domxref("ParentNode")}} 接口中的方法。</em></em></p>
<dl>
<dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
<dd>返回在<code>DocumentFragment</code>中以文档顺序排列的第一个符合指定选择器的<code>Element</code>节点。</dd>
<dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
<dd>返回在<code>DocumentFragment</code>中所有的符合指定选择器的<code>Element</code>节点组成的<code>NodeList</code>数组。</dd>
<dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
<dd>返回在<code>DocumentFragment</code>中以文档顺序排列的第一个符合指定ID选择器的<code>Element</code>节点。与<code>Document.getElementById()</code>作用相同。</dd>
</dl>
<h2 id="例子">例子</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><ul id="list"></ul>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">const list = document.querySelector('#list');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
const fragment = document.createDocumentFragment();
fruits.forEach(fruit => {
const li = document.createElement('li');
li.innerHTML = fruit;
fragment.appendChild(li);
});
list.appendChild(fragment);
</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample('Example')}}</p>
<h2 id="标准">标准</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</tbody>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>添加了构建函数和对 {{domxref("ParentNode")}} 的实现。</td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
<td>{{Spec2('Selectors API Level 1')}}</td>
<td>添加 <code>querySelector()</code> 和 <code>querySelectorAll()</code> 方法。</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>和 {{SpecName('DOM2 Core')}} 一样</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM2 Core')}}</td>
<td>和 {{SpecName('DOM1')}} 一样</td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>最初的定义。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.DocumentFragment")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Document_Object_Model">The DOM interfaces index.</a></li>
</ul>
|
