소년코딩의 자바스크립트 강좌 44. DOM: DocumentFragment 타입

DocumentFragment 타입

DocumentFragment 타입은 마크업에 표현되지 않는 유일한 노드 타입이다.

DocumentFragment 노드를 생성해서 사용하면 라이브 DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있다.

메모리상에서만 존재하는 빈 문서 템플릿같은 거로 DocumentFragment의 자식노드를 메모리상에서 손쉽게 조작한 후,  라이브 DOM에 추가하는 것도 가능하다.

특징

• nodeType은 11이다.
• nodeName은 '#document-fragment'
• nodeValue는 null이다.
• parentNode는 null이다.
• 자식 노드로 Element, Comment, Text등등을 가질 수 있다.

---

DocumentFragment를 생성하기

createDocumentFragment() 를 사용하여 DocumentFragment를 생성하고, 추가할 수 있다.

var docFrag = document.createDocumentFragment();

var colors = ['blue', 'red', 'green'];

colors.forEach(function(color) {
    var li = document.createElement('li');
    li.textContent = color;
    docFrag.appendChild(li);
});

console.log(docFrag.textContent);  // blueredgreen

DocumentFragment를 사용하여 메모리상에서 노드 구조를 만들고 이를 라이브 노드 구조에 삽입하면 매우 효율적이다.

---

DocumentFragment를 라이브 DOM에 추가하기

appendChild()와 insertBefore() 노드 메서드의 인수로 DocumentFragment를 전달 하면, DocumentFragment의 자식 노드는 메서드가 호출되는 DOM 노드의 자식 노드로 옮겨진다.

// <ul id="myUl"></ul>

var myUl = document.getElementById('myUl');
var docFrag = document.createDocumentFragment();

var colors = ['blue', 'red', 'green'];

colors.forEach(function(color) {
    var li = document.createElement('li');
    li.textContent = color;
    docFrag.appendChild(li);
});

myUl.appendChild(docFrag);

console.log(document.body.innerHTML);
// <ul><li>blue</li><li>red</li><li>green</li></ul>

---

innerHTML 사용하기

노드 메서드를 사용하여 메모리상에서 DOM 구조를 생성하는 것은 많은 번거로움이 있다.

이런 번거로움을 피할려면 innerHTML 프로퍼티를 사용하는게 좋다.

그러면 결과적으로 HTML 문자열로부터 DOM 구조가 만들어진다. 

var div = document.createElement('div');
var docFrag = document.createDocumentFragment();

// DocumentFragment에 div를 추가
docFrag.appendChild(div);

// 문자열로부터 DOM 구조를 생성
docFrag.querySelector('div').innerHTML = '<ul><li>A</li><li>B</li></ul>';

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.