DocumentFragment

이동:

Properties
Constructor
Methods
Specifications
Browser compatibility
See also

이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

DocumentFragment 인터페이스는 부모가 없는 단순한 형태의 문서 객체를 나타냅니다. Document의 경량화된 버전으로서 사용되며, 일반적인 문서와 마찬가지로 여러 노드로 이루어진 문서의 구조를 담을 수 있습니다. 핵심적인 차이점은 document fragment는 활성화된 문서 트리의 일부가 아니기 때문에, fragment에 가하는 변경사항은 문서에 영향을 주지 않고 reflow를 일으키지 않으며, 성능에 큰 영향을 미치지 않습니다.

DocumentFragment는 일반적으로 DOM 서브트리를 조립해서 DOM에 삽입하기 위한 용도로 사용되고, 이 때 appendChild()나 insertBefore() 같은 Node 인터페이스의 메소드가 사용됩니다. 이 작업은 fragment의 노드들을 DOM으로 이동시키고, DocumentFragment를 비웁니다. 모든 노드들이 한꺼번에 문서에 삽입되기 때문에, 한 번의 리플로우와 렌더링만 일어납니다. 노드를 개별적으로 삽입할 때 매 노드마다 한 번씩 일어나는 것과는 대조적입니다.

이 인터페이스는 또한 Web component와 함께 유용하게 사용할 수 있습니다: <template> 요소는 HTMLTemplateElement.content 속성에 DocumentFragment를 가지고 있습니다.

빈 DocumentFragment는 document.createDocumentFragment() 메소드 혹은 생성자를 통해 만들 수 있습니다.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="346" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DocumentFragment</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

This interface has no specific properties, but inherits those of its parent, Node, and implements those of the ParentNode interface.

ParentNode.children Read only: Returns a live HTMLCollection containing all objects of type Element that are children of the DocumentFragment object.
ParentNode.firstElementChild Read only: Returns the Element that is the first child of the DocumentFragment object, or null if there is none.
ParentNode.lastElementChild Read only: Returns the Element that is the last child of the DocumentFragment object, or null if there is none.
ParentNode.childElementCount Read only: Returns an unsigned long giving the amount of children that the DocumentFragment has.

Constructor

DocumentFragment(): Returns an empty DocumentFragment object.

Methods

This interface inherits the methods of its parent, Node, and implements those of the ParentNode interface.

DocumentFragment.querySelector(): Returns the first Element node within the DocumentFragment, in document order, that matches the specified selectors.
DocumentFragment.querySelectorAll(): Returns a NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.

DocumentFragment.getElementById(): Returns the first Element node within the DocumentFragment, in document order, that matches the specified ID.

Specifications

Specification	Status	Comment
DOM The definition of 'DocumentFragment' in that specification.	Living Standard	Added the constructor and the implementation of `ParentNode`.
Selectors API Level 1 The definition of 'DocumentFragment' in that specification.	Obsolete	Added the `querySelector()` and `querySelectorAll()` methods.
Document Object Model (DOM) Level 3 Core Specification The definition of 'DocumentFragment' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core Specification The definition of 'DocumentFragment' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification The definition of 'DocumentFragment' in that specification.	Obsolete	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DocumentFragment`	Chrome Full support 1	Edge Full support Yes	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`DocumentFragment()` constructor Experimental	Chrome Full support 28	Edge Full support Yes	Firefox Full support 24	IE No support No	Opera Full support 15	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 24	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
`querySelector`	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.5	IE Full support 8	Opera Full support 10	Safari Full support 3.2	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3.2	Samsung Internet Android Full support Yes
`querySelectorAll`	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.5	IE Full support 8	Opera Full support 10	Safari Full support 3.2	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3.2	Samsung Internet Android Full support Yes
`ParentNode` properties Experimental	Chrome Full support 28	Edge No support No	Firefox Full support 25	IE No support No	Opera Full support 15	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 25	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support Yes
`ParentNode` methods Experimental	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, seungha-kim

최종 변경자: mdnwebdocs-bot, 2019. 3. 18. 오후 5:33:53