DocumentFragment

DocumentFragment 인터페이스는 아주 작고 부모를 갖지 않는 문서 객체를 나타냅니다.

DocumentFragment는 일반 문서처럼 노드로 구성된 문서 구조를 저장할 수 있으므로 Document의 가벼운 버전으로 사용됩니다. Document와의 중요한 차이점으로, DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 내부의 트리를 변경해도 문서나 성능에 아무 영향도 주지 않으며 리플로우도 방지할 수 있습니다.

생성자

DocumentFragment() (en-US): 새로운 DocumentFragment 객체를 생성하여 반환합니다.

속성

부모인 Node의 속성을 상속합니다.

DocumentFragment.childElementCount (en-US) Read only: DocumentFragment가 포함한 자식 Element의 수를 반환합니다.
DocumentFragment.children (en-US) Read only: DocumentFragment 객체의 자식 Element를 전부 포함하는 실시간 HTMLCollection을 반환합니다.
DocumentFragment.firstElementChild (en-US) Read only: DocumentFragment 객체의 첫번째 자식 Element를 반환합니다. 자식이 없으면 null을 반환합니다.
DocumentFragment.lastElementChild (en-US) Read only: DocumentFragment 객체의 마지막 자식 Element를 반환합니다. 자식이 없으면 null을 반환합니다.

메서드

부모인 Node의 메서드를 상속합니다.

DocumentFragment.append() (en-US): DocumentFragment의 마지막 자식 뒤에 Node 객체들이나 문자열 객체들을 추가합니다.
DocumentFragment.prepend() (en-US): DocumentFragment의 첫 번째 자식 앞에 Node 객체들이나 문자열 객체들을 추가합니다.
DocumentFragment.querySelector() (en-US): DocumentFragment 내에서, 주어진 선택자와 일치하는 첫 번째 Element 노드를 반환합니다.
DocumentFragment.querySelectorAll() (en-US): DocumentFragment 내에서, 주어진 선택자와 일치하는 모든 Element 노드를 포함한 NodeList를 반환합니다.
DocumentFragment.replaceChildren() (en-US): DocumentFragment 내의 자식 하나를 일련의 새로운 자식으로 대체합니다.
DocumentFragment.getElementById(): DocumentFragment 내에서, 주어진 ID와 일치하는 첫 번째 Element 노드를 반환합니다. Document.getElementById()와 기능적으로 동일합니다.

사용 일람

DocumentFragment의 일반적인 용도는 그 안에 DOM 하위 트리를 조립한 다음, Node 인터페이스의 appendChild()나 insertBefore()와 같은 메서드로 DOM에 하위 트리를 삽입하는 것입니다. 이 방법을 사용하면 DocumentFragment의 노드들이 모두 DOM으로 이동하고 빈 DocumentFragment만 남게 됩니다. 이때 모든 노드가 한 번에 문서에 삽입되기 때문에 리플로우도 한 번만 발생합니다. 반면 노드를 각각 하나씩 삽입했다면, 최악의 경우 매 삽입마다 리플로우가 발생했을 겁니다.

DocumentFragment는 웹 컴포넌트에서도 유용하게 쓰입니다. 예컨대 <template> 요소의 HTMLTemplateElement.content (en-US) 속성이 DocumentFragment입니다.

document.createDocumentFragment() 메서드나 DocumentFragment() (en-US) 생성자를 사용해서 빈 DocumentFragment를 만들 수 있습니다.

예제

HTML

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

JavaScript

const list = document.querySelector('#list')
const fruits = ['Apple', 'Orange', 'Banana', 'Melon']

const fragment = new DocumentFragment()

fruits.forEach((fruit) => {
  const li = document.createElement('li')
  li.textContent = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

결과

명세

Specification
DOM Standard # interface-documentfragment

브라우저 호환성

BCD tables only load in the browser