initial commit

1 files changed, 139 insertions, 0 deletions

diff --git a/files/ko/web/api/documentfragment/index.html b/files/ko/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..a22770cfae
--- /dev/null
+++ b/files/ko/web/api/documentfragment/index.html
@@ -0,0 +1,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">&lt;ul id="list"&gt;&lt;/ul&gt;
+</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>