DOM 객체를 생성하는 함수

자바스크립트를 사용하여 DOM(Document Object Model, 문서 객체 모델)의 객체를 생성하는 주요 함수들에 대해 알아보겠습니다.

세 가지 주요 함수

DOM 객체를 생성하는 세 가지 주요 함수
createElement() 새로운 HTML 요소를 생성
createTextNode() 새로운 텍스트 노드를 생성
createDocumentFragment() 새로운 DocumentFragment 객체를 생성

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

createElement()

createElement() 함수는
지정한 HTML 태그 이름의 HTML 요소 객체를 생성해서 반환합니다.

JavaScript 
const element = document.createElement("div");

// 생성된 HTML 요소 객체를 반환
console.log(element); // <div></div>

createElement() 함수로 생성된 요소 객체는 아직 DOM에 추가되지 않은 상태이며, 원하는 위치에 직접 추가(혹은 삽입)해야 웹 페이지에서 표시됩니다.

예제

<div> 요소를 생성하고 텍스트 콘텐츠를 설정한 후, <body> 끝에 추가하는 예제입니다.

JavaScript 
// div 요소 생성
const newDiv = document.createElement("div");

// 텍스트 콘텐츠 추가
newDiv.textContent = "안녕하세요! 이 문장은 새로운 div에 추가된 텍스트입니다.";

// 생성된 요소를 body 끝에 추가
document.body.appendChild(newDiv);

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

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

더 자세한 내용과 예제는 자바스크립트 createElement() 함수 – 새로운 HTML 요소를 생성을 참조하세요.

createTextNode()

createTextNode() 함수는
지정한 문자열로 텍스트 노드 객체를 생성해서 반환합니다.

JavaScript 
let textNode = document.createTextNode("환영합니다!");

// 생성된 텍스트 노드 객체를 반환
console.log(textNode); // "환영합니다!"

createTextNode() 함수로 생성된 텍스트 객체는 아직 DOM에 추가되지 않은 상태이며, 원하는 위치에 직접 추가(혹은 삽입)해야 웹 페이지에서 표시됩니다.

예제

다음은 createTextNode()로 생성한 텍스트 노드를 <div> 요소의 자식으로 추가하는 예제입니다.

HTML 
<div id="my-div" style="border: 1px solid red; margin-bottom: 1em;">
    Content
</div>

<button type="button" id="insert-btn">div에 텍스트 노드 추가하기</button>
JavaScript 
const btn = document.getElementById("insert-btn");          

btn.addEventListener("click", () => {
    // 부모 요소 노드
    const myDiv = document.getElementById("my-div");

    if (myDiv) {
        // 자식으로 추가할 텍스트 노드
        const newText = document.createTextNode("😃 텍스트 노드");

        // div 안쪽 끝 부분, 즉 마지막 자식으로 추가
        myDiv.appendChild(newText);
    }
});

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

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

더 자세한 내용과 예제는 자바스크립트 createTextNode() 함수 – 새로운 텍스트 노드를 생성을 참조하세요.

createDocumentFragment()

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

JavaScript 
const docFragment = document.createDocumentFragment();

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

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

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

DocumentFragment 객체의 이해

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

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

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

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

더 자세한 내용과 설명은 자바스크립트 createDocumentFragment() 함수 사용법을 참조하세요.

정리

자바스크립트를 사용하여 DOM 객체를 생성하는 방법을 살펴보았습니다. createElement()를 사용하여 요소를 생성하고, createTextNode()로 텍스트 노드를 생성하여 사용하며, createDocumentFragment()로 여러 요소를 효율적으로 추가할 수 있습니다. 이러한 함수들을 활용하여 더욱 동적이고 반응적인 웹 페이지를 구현할 수 있습니다.

브라우저 호환성

DOM 객체를 생성하는 세 가지 주요 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
createElement() 1 12 1 1
createTextNode() 1 12 1 1
createDocumentFragment() 1 12 1 1

같이 보기

명세서

DOM 객체를 생성하는 세 가지 주요 함수의 명세서 사양
명세서 사양
createElement() DOM Standard
#ref-for-dom-document-createelement①
createTextNode() DOM Standard
#ref-for-dom-document-createtextnode①
createDocumentFragment() DOM Standard
#ref-for-dom-document-createdocumentfragment①

참고문헌