Document.createDocumentFragment()

createDocumentFragment() 함수는 DocumentFragment 객체를 생성해서 반환합니다.

JavaScript 
const docFragment = document.createDocumentFragment();

// 생성된 DocumentFragment 객체를 반환
console.log(docFragment); // #document-fragment

이렇게 생성된 DocumentFragment 객체는 가상의 메모리 공간에 존재하는 일시적인 DOM 조각으로 원하는 메인 DOM 트리 위치에 직접 추가(혹은 삽입)해야 웹 페이지에서 표시됩니다.

구문

JavaScript 
const fragment = document.createDocumentFragment()

매개변수

createDocumentFragment() 함수는 매개변수를 받지 않습니다.

반환 값

생성된 DocumentFragment 객체입니다.
이 객체는 단순히 비어 있는 DOM 조각을 나타내며, 이후 필요한 요소와 내용을 이 객체에 직접 추가해야 합니다.

사용법 참고 사항

createDocumentFragment() 함수는 DocumentFragment 객체를 생성하여 반환하는 함수입니다.
이 함수를 사용하려면 DocumentFragment 객체에 대한 기본적인 이해가 필요합니다.

DocumentFragment 객체의 이해

DocumentFragment 객체는 DOM(Document Object Model) 노드의 일종으로, 실제 메인 DOM 트리에 포함되지 않는 가상의 메모리 공간에 존재하는 객체입니다. 마치 DOM 노드들을 담는 임시 저장소와 같다고 생각할 수 있습니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.

가상 DOM 조각

메인 DOM 트리에 직접적으로 연결되지 않은 비활성 노드 집합인 DocumentFragment 객체는 브라우저가 렌더링하지 않는 가상의 메모리 공간에 존재하는 DOM 조각입니다.

일괄 작업(복잡한 DOM 구조 생성)

DocumentFragment 객체 안에서 여러 개의 DOM 노드를 조작하고 한 번에 메인 DOM 트리에 추가할 수 있습니다.

성능 향상

이 때문에 DocumentFragment를 사용해 여러 요소를 한 번에 조작한 후, 한 번에 DOM 트리에 추가하면 재렌더링 성능이 크게 향상됩니다. 일반적으로 요소를 DOM에 개별적으로 삽입하면 매번 페이지가 다시 브라우저가 DOM을 다시 그려야 하지만, DocumentFragment에 여러 요소를 추가한 뒤 최종적으로 한 번에 메인 DOM 트리에 삽입하면, DOM 조작 시 발생하는 브라우저의 reflow와 repaint를 최소화하여 성능을 향상시킬 수 있습니다.

DocumentFragment를 DOM에 추가하면 DocumentFragment 자체는 더 이상 필요 없어지기 때문에 메모리에서 해제됩니다.

DocumentFragment 객체를 사용하는 이유
  • DOM 조작 시 발생하는 reflow와 repaint를 최소화하여 성능을 향상시키기 위해 사용됩니다.
  • 여러 개의 요소를 DocumentFragment에 미리 추가하고, 한 번에 메인 DOM 트리에 추가하면 브라우저가 한 번만 reflow와 repaint를 수행하기 때문입니다.

예제

다음은 createDocumentFragment() 함수를 사용하여 DocumentFragment를 생성하고, 이를 활용해 DOM에 여러 요소를 추가하는 과정을 자세한 절차와 함께 설명한 예제입니다.

예제에서는 버튼을 클릭하면 <ol> 요소에 있는 <li> 요소들이 동적으로 추가되도록 만들어 보겠습니다.

HTML 
<!-- 비어있는 ol 요소 -->
<ul id="item-list" style="border: 1px solid red;"></ol>

<!-- 버튼을 클릭하면
     ol 요소에 li 항목들이 동적으로 추가 -->
<button type="button" id="add-items-btn">Add Items</button>
JavaScript 
// 버튼 요소 가져오기
const addButton = document.getElementById("add-items-btn");

// 클릭 이벤트 리스너 추가
addButton.addEventListener("click", () => {
    // 1. 빈 DocumentFragment 생성
    const fragment = document.createDocumentFragment();

    // 2. 새로운 <li> 요소들을 생성하고 Fragment에 추가
    for (let i = 1; i <= 5; i++) {
        // <li> 요소 생성
        const newItem = document.createElement("li");
        
        // <li> 요소에 텍스트 콘텐츠 추가
        newItem.textContent = `Item ${i}`;
        
        // DocumentFragment에 <li> 요소 추가
        fragment.appendChild(newItem);
    }

    // 3. 생성된 DocumentFragment를 실제 DOM에 한 번에 삽입
    document.getElementById("item-list").appendChild(fragment);

    // 버튼을 비활성화하여 중복 추가 방지 (선택 사항)
    addButton.disabled = true;
});

코드 부연설명
createElement() 함수는 새로운 HTML 요소를 생성해서 반환합니다.

코드 부연설명
appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

브라우저 호환성

createDocumentFragment() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
createDocumentFragment() 1 12 1 1

명세서

createDocumentFragment() 함수의 명세서 사양
명세서 사양
createDocumentFragment() DOM Standard
#ref-for-dom-document-createdocumentfragment①

참고문헌

같이 보기