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

<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);

ê²°ê³¼

명세

브라우저 호환성