HTML DOM의 createDocumentFragment() 메서드는 문서 조각(Document Fragment)을 생성하는 데 사용됩니다. 문서 조각은 메모리에 존재하기 때문에 실제 DOM 구조에는 아무런 영향을 주지 않습니다. 이 문서 조각을 DOM에 추가(append)하면 조각 자체가 삽입되는 것이 아니라, 그 안에 담긴 자식 노드들만 문서에 추가된다는 점이 핵심 특징입니다.
문법(Syntax)
createDocumentFragment() 메서드의 기본 문법은 다음과 같습니다.
document.createDocumentFragment()
이 메서드는 문서 조각 노드를 나타내는 DocumentFragment 객체를 반환합니다.
예제
createDocumentFragment() 메서드를 활용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>createDocumentFragment() 예제</h1>
<p>아래 버튼을 클릭하면 createDocumentFragment 메서드로 목록 항목이 변경됩니다.</p>
<button type="button" onclick="changeList()">CHANGE</button>
<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava</li>
<li>Strawberry</li>
<li>Papaya</li>
</ul>
<script>
function changeList() {
var x = document.createDocumentFragment();
x.appendChild(document.getElementsByTagName("LI")[0]);
x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
document.getElementsByTagName("UL")[0].appendChild(x);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭하면 다음과 같이 첫 번째 목록 항목이 변경되어 맨 뒤로 이동합니다.
코드 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. 순서 없는 목록 생성
다섯 개의 목록 항목(li)을 포함하는 순서 없는 목록(ul)을 만듭니다.
<ul> <li>Mango</li> <li>Peach</li> <li>Guava</li> <li>Strawberry</li> <li>Papaya</li> </ul>
2. CHANGE 버튼 생성
사용자가 클릭하면 changeList() 함수를 실행하는 버튼을 만듭니다.
<button type="button" onclick="changeList()">CHANGE</button>
3. changeList() 함수 동작 원리
changeList() 함수는 document 객체의 createDocumentFragment() 메서드를 호출하여 문서 조각을 생성하고 변수 x에 할당합니다. 이후 appendChild() 메서드로 첫 번째 li 요소를 문서 조각의 자식으로 옮기고, 조각 내부의 텍스트 값을 "Watermelon"으로 변경한 뒤, 문서 조각 전체를 ul 요소의 마지막 자식으로 추가합니다.
function changeList() {
var x = document.createDocumentFragment();
x.appendChild(document.getElementsByTagName("LI")[0]);
x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
document.getElementsByTagName("UL")[0].appendChild(x);
}정리
createDocumentFragment()는 여러 노드를 한 번에 조립한 후 DOM에 삽입할 때 유용합니다. 문서 조각은 메모리에서만 존재하므로 중간 작업 과정에서 브라우저 렌더링에 부담을 주지 않으며, 최종적으로 DOM에 추가될 때는 조각 자체가 사라지고 자식 노드들만 삽입됩니다. 이러한 특성 덕분에 대량의 요소를 동적으로 생성할 때 성능 최적화에 큰 도움이 됩니다.