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
|
---
title: DocumentFragment
slug: Web/API/DocumentFragment
tags:
- API
- DOM
- DocumentFragment
- Documents
- Interface
- Reference
- Web Components
translation_of: Web/API/DocumentFragment
---
<div>{{ APIRef("DOM") }}</div>
<p><span class="seoSummary"><strong><code>DocumentFragment</code></strong> 인터페이스는 부모가 없는 아주 작은 document 객체를 나타냅니다. {{domxref("Document")}}의 경량화된 버전으로 사용되며 표준문서와 같이 노드로 구성된 문서 구조의 일부를 저장합니다.</span> 중요한 차이점은 <code>DocumentFragment</code>는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며({{Glossary("reflow")}} 포함) 성능에도 영향이 없다는 점입니다.</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="생성자">생성자</h2>
<dl>
<dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }}</dt>
<dd>새로운 <code>DocumentFragment</code> 객체를 생성하여 반환합니다.</dd>
</dl>
<h2 id="속성">속성</h2>
<p><em>이 인터페이스는 특정한 속성이 없지만 부모인 {{domxref("Node")}}, {{domxref("ParentNode")}}의 속성을 상속합니다.</em></p>
<dl>
<dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
<dd><code>DocumentFragment</code> 객체의 자식 {{domxref("Element")}}를 전부 포함하는 실시간 {{domxref("HTMLCollection")}}을 반환합니다.</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>DocumentFragment</code>가 가진 자식 수를 <code>unsigned long</code> 타입으로 반환합니다.</dd>
</dl>
<h2 id="메서드">메서드</h2>
<p><em>이 인터페이스는 부모인 {{domxref("Node")}}와<em> {{domxref("ParentNode")}} 인터페이스의 메서드를 상속합니다</em></em><em>.</em></p>
<dl>
<dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
<dd><code>DocumentFragment</code> 내 지정된 선택자와 일치하는 첫번째 {{domxref("Element")}} 노드를 반환합니다.</dd>
<dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
<dd><code>DocumentFragment</code> 내 지정된 선택자와 일치하는 모든 {{domxref("Element")}} 노드를 {{domxref("NodeList")}} 형태로 반환합니다.</dd>
<dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
<dd><code style="font-size: 14px;">DocumentFragment</code> 내 지정된 ID와 일치하는 첫번째 {{domxref("Element")}} 노드를 반환합니다. 기능적으로 {{domxref("Document.getElementById()")}}와 동일합니다.</dd>
</dl>
<h2 id="사용법">사용법</h2>
<p><code>DocumentFragment</code>의 일반적인 용도는 <code>DocumentFragment</code>를 생성하고, 그 안에서 DOM 하위 트리를 조립한 다음, {{domxref("Node.appendChild", "appendChild()")}}나 {{domxref("Node.insertBefore", "insertBefore()")}}와 같은 {{domxref("Node")}} 인터페이스 메서드를 사용하여 DOM에 삽입하는 것입니다. 이렇게 하면 <code>DocumentFragment</code>의 노드들이 DOM으로 이동되고 빈 <code>DocumentFragment</code>만 남게 됩니다. 모든 노드가 한 번에 문서에 삽입되기 때문에 노드를 개별로 하나씩 삽입할 때마다 리플로우와 렌더링을 해주는 대신 단 한 번의 리플로우와 렌더링만 발생하게 됩니다.</p>
<p>이 인터페이스는 웹 컴포넌트를 사용할 때도 매우 유용합니다: {{HTMLElement("template")}} 요소는 {{domxref("HTMLTemplateElement.content")}} 속성에 <code>DocumentFragment</code>를 포함하고 있습니다.</p>
<p>빈 <code>DocumentFragment</code>는 {{domxref("document.createDocumentFragment()")}} 메서드나 생성자를 이용하여 만들 수 있습니다.</p>
<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">var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']
var fragment = new DocumentFragment()
fruits.forEach(function (fruit) {
var li = document.createElement('li')
li.innerHTML = fruit
fragment.appendChild(li)
})
list.appendChild(fragment)
</pre>
<h3 id="결과">결과</h3>
<p>{{ EmbedLiveSample('예제', '', '', '', 'Web/API/DocumentFragment') }}</p>
<h2 id="Specifications" name="Specifications">명세</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', '#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 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>{{Compat("api.DocumentFragment")}}</p>
<h2 id="참조">참조</h2>
<ul>
<li><a href="/ko/docs/Web/API/Document_Object_Model">DOM 인터페이스</a></li>
</ul>
|
