From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/documentfragment/index.html | 139 +++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 files/ko/web/api/documentfragment/index.html (limited to 'files/ko/web/api/documentfragment') 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 +--- +
{{ APIRef("DOM") }}
+ +

DocumentFragment 인터페이스는 부모가 없는 아주 작은 document 객체를 나타냅니다. {{domxref("Document")}}의 경량화된 버전으로 사용되며 표준문서와 같이 노드로 구성된 문서 구조의 일부를 저장합니다. 중요한 차이점은 DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며({{Glossary("reflow")}} 포함) 성능에도 영향이 없다는 점입니다.

+ +

{{InheritanceDiagram}}

+ +

생성자

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }}
+
새로운 DocumentFragment 객체를 생성하여 반환합니다.
+
+ +

속성

+ +

이 인터페이스는 특정한 속성이 없지만 부모인 {{domxref("Node")}}, {{domxref("ParentNode")}}의 속성을 상속합니다.

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
DocumentFragment 객체의 자식 {{domxref("Element")}}를 전부 포함하는 실시간 {{domxref("HTMLCollection")}}을 반환합니다.
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
DocumentFragment 객체의 첫번째 자식 {{domxref("Element")}}를 반환합니다. 없으면 null을 반환합니다.
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
DocumentFragment 객체의 마지막 자식 {{domxref("Element")}}를 반환합니다. 없으면 null을 반환합니다.
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
DocumentFragment가 가진 자식 수를 unsigned long 타입으로 반환합니다.
+
+ +

메서드

+ +

이 인터페이스는 부모인 {{domxref("Node")}}와 {{domxref("ParentNode")}} 인터페이스의 메서드를 상속합니다.

+ +
+
{{domxref("DocumentFragment.querySelector()")}}
+
DocumentFragment 내 지정된 선택자와 일치하는 첫번째 {{domxref("Element")}} 노드를 반환합니다.
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
DocumentFragment 내 지정된 선택자와 일치하는 모든 {{domxref("Element")}} 노드를 {{domxref("NodeList")}} 형태로 반환합니다.
+
{{domxref("DocumentFragment.getElementById()")}}
+
DocumentFragment 내 지정된 ID와 일치하는 첫번째 {{domxref("Element")}} 노드를 반환합니다. 기능적으로 {{domxref("Document.getElementById()")}}와 동일합니다.
+
+ +

사용법

+ +

DocumentFragment의 일반적인 용도는 DocumentFragment를 생성하고, 그 안에서 DOM 하위 트리를 조립한 다음, {{domxref("Node.appendChild", "appendChild()")}}나 {{domxref("Node.insertBefore", "insertBefore()")}}와 같은 {{domxref("Node")}} 인터페이스 메서드를 사용하여 DOM에 삽입하는 것입니다. 이렇게 하면 DocumentFragment의 노드들이 DOM으로 이동되고 빈 DocumentFragment만 남게 됩니다. 모든 노드가 한 번에 문서에 삽입되기 때문에 노드를 개별로 하나씩 삽입할 때마다 리플로우와 렌더링을 해주는 대신 단 한 번의 리플로우와 렌더링만 발생하게 됩니다.

+ +

이 인터페이스는 웹 컴포넌트를 사용할 때도 매우 유용합니다: {{HTMLElement("template")}} 요소는 {{domxref("HTMLTemplateElement.content")}} 속성에 DocumentFragment를 포함하고 있습니다.

+ +

빈 DocumentFragment는 {{domxref("document.createDocumentFragment()")}} 메서드나 생성자를 이용하여 만들 수 있습니다.

+ +

예제

+ +

HTML

+ +
<ul id="list"></ul>
+
+ +

JavaScript

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

결과

+ +

{{ EmbedLiveSample('예제', '', '', '', 'Web/API/DocumentFragment') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
표준상태비고
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Added the constructor and the implementation of {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Added the querySelector() and querySelectorAll() methods.
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("api.DocumentFragment")}}

+ +

참조

+ + -- cgit v1.2.3-54-g00ecf