이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.
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 typeElement
that are children of theDocumentFragment
object. ParentNode.firstElementChild
Read only- Returns the
Element
that is the first child of theDocumentFragment
object, ornull
if there is none. ParentNode.lastElementChild
Read only- Returns the
Element
that is the last child of theDocumentFragment
object, ornull
if there is none. ParentNode.childElementCount
Read only- Returns an
unsigned long
giving the amount of children that theDocumentFragment
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 theDocumentFragment
, in document order, that matches the specified selectors. DocumentFragment.querySelectorAll()
- Returns a
NodeList
of all theElement
nodes within theDocumentFragment
that match the specified selectors.
DocumentFragment.getElementById()
- Returns the first
Element
node within theDocumentFragment
, 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
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | 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 | Edge Mobile 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 | 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 | Edge Mobile 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 Yes | 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 | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support 10 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
querySelectorAll | Chrome Full support 1 | Edge Full support Yes | 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 | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support 10 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
ParentNode properties | 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 | Edge Mobile No support No | Firefox Android Full support 25 | Opera Android Full support 5 | Safari iOS No support No | Samsung Internet Android Full support Yes |
ParentNode methods | 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 ? | Edge Mobile 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.