현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
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.childrenRead only- Returns a live
HTMLCollectioncontaining all objects of typeElementthat are children of theDocumentFragmentobject. ParentNode.firstElementChildRead only- Returns the
Elementthat is the first child of theDocumentFragmentobject, ornullif there is none. ParentNode.lastElementChildRead only- Returns the
Elementthat is the last child of theDocumentFragmentobject, ornullif there is none. ParentNode.childElementCountRead only- Returns an
unsigned longgiving the amount of children that theDocumentFragmenthas.
Constructor
DocumentFragment()- Returns an empty
DocumentFragmentobject.
Methods
This interface inherits the methods of its parent, Node, and implements those of the ParentNode interface.
DocumentFragment.querySelector()- Returns the first
Elementnode within theDocumentFragment, in document order, that matches the specified selectors. DocumentFragment.querySelectorAll()- Returns a
NodeListof all theElementnodes within theDocumentFragmentthat match the specified selectors.
DocumentFragment.getElementById()- Returns the first
Elementnode 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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | Yes | 1 | Yes | Yes | Yes |
DocumentFragment() constructor | 28 | No | 24 | No | 15 | No |
querySelector | 1 | Yes | 3.5 | 8 | 10 | 3.2 |
querySelectorAll | 1 | Yes | 3.5 | 8 | 10 | 3.2 |
ParentNode properties | 28 | No | 25 | No | 15 | No |
ParentNode methods | No | No | No | No | No | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
DocumentFragment() constructor | Yes | Yes | Yes | 24 | Yes | ? | Yes |
querySelector | Yes | Yes | Yes | 4 | 10 | 3.2 | Yes |
querySelectorAll | Yes | Yes | Yes | 4 | 10 | 3.2 | Yes |
ParentNode properties | Yes | Yes | No | 25 | 5 | No | Yes |
ParentNode methods | No | ? | No | No | No | No | No |