DocumentFragment

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

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

생성자

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

속성

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

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

메서드

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

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

사용 일람

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

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

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

예제

HTML

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