DocumentFragment 인터페이스는 부모가 없는 아주 작은 document 객체를 나타냅니다. Document의 경량화된 버전으로 사용되며 표준문서와 같이 노드로 구성된 문서 구조의 일부를 저장합니다. 중요한 차이점은 DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며(reflow 포함) 성능에도 영향이 없다는 점입니다.
<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;}
생성자
DocumentFragment()- 새로운
DocumentFragment객체를 생성하여 반환합니다.
속성
이 인터페이스는 특정한 속성이 없지만 부모인 Node, ParentNode의 속성을 상속합니다.
ParentNode.childrenRead onlyDocumentFragment객체의 자식Element를 전부 포함하는 실시간HTMLCollection을 반환합니다.ParentNode.firstElementChildRead onlyDocumentFragment객체의 첫번째 자식Element를 반환합니다. 없으면null을 반환합니다.ParentNode.lastElementChildRead onlyDocumentFragment객체의 마지막 자식Element를 반환합니다. 없으면null을 반환합니다.ParentNode.childElementCountRead onlyDocumentFragment가 가진 자식 수를unsigned long타입으로 반환합니다.
메서드
이 인터페이스는 부모인 Node와 ParentNode 인터페이스의 메서드를 상속합니다.
DocumentFragment.querySelector()DocumentFragment내 지정된 선택자와 일치하는 첫번째Element노드를 반환합니다.DocumentFragment.querySelectorAll()DocumentFragment내 지정된 선택자와 일치하는 모든Element노드를NodeList형태로 반환합니다.DocumentFragment.getElementById()DocumentFragment내 지정된 ID와 일치하는 첫번째Element노드를 반환합니다. 기능적으로Document.getElementById()와 동일합니다.
사용법
DocumentFragment의 일반적인 용도는 DocumentFragment를 생성하고, 그 안에서 DOM 하위 트리를 조립한 다음, appendChild()나 insertBefore()와 같은 Node 인터페이스 메서드를 사용하여 DOM에 삽입하는 것입니다. 이렇게 하면 DocumentFragment의 노드들이 DOM으로 이동되고 빈 DocumentFragment만 남게 됩니다. 모든 노드가 한 번에 문서에 삽입되기 때문에 노드를 개별로 하나씩 삽입할 때마다 리플로우와 렌더링을 해주는 대신 단 한 번의 리플로우와 렌더링만 발생하게 됩니다.
이 인터페이스는 웹 컴포넌트를 사용할 때도 매우 유용합니다: <template> 요소는 HTMLTemplateElement.content 속성에 DocumentFragment를 포함하고 있습니다.
빈 DocumentFragment는 document.createDocumentFragment() 메서드나 생성자를 이용하여 만들 수 있습니다.
Example
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)
결과
명세
| 표준 | 상태 | 비고 |
|---|---|---|
| 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 |
브라우저 호환성
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.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DocumentFragment | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
DocumentFragment() constructor | Chrome Full support 28 | Edge Full support ≤18 | Firefox Full support 24 | IE No support No | Opera Full support 15 | Safari Full support 8 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 24 | Opera Android Full support Yes | Safari iOS Full support 8 | 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 No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
ParentNode properties | Chrome Full support 28 | Edge Full support 79 | 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 |
querySelector | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | 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 9 | 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 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.