처음 JS로 돔을 만들고, 추가하는 방법?
document.createElement()로 생성한 뒤, appendChild()를 이용해 바로 DOM에 등록!
보통 DOM 요소를 만드는 방법
<body>
<script>
for(let i=0; i<10; i++) {
let divEl = document.createElement('div');
divEl.innerText = 'hello' + i;
document.body.appendChild(divEl);
// body 태그에 만든 div요소를 바로 붙여넣음
}
</script>
</body>이 때, DocumentFragment 노드를 사용하면, 오직 메모리상에만 존재하는 경량화된 DOM을 만들 수 있다!
<body>
<script>
const docFrag = document.createDocumentFragment();
// const test = document.createElement('div');
for(let i=0; i<10; i++) {
let divEl = document.createElement('div');
divEl.innerText = 'hello' + i;
docFrag.appendChild(divEl);
// test.appendChild(divEl);
}
console.log(docFrag.childNodes); // 자식 요소들 출력
document.body.appendChild(docFrag);
// => 별 다른 부모 요소없이 원하는 자식 요소들만 dom에 추가할 수 있게 됨!
console.log(docFrag.childNodes); // 자식 요소 X
// document.body.appendChild(test);
// => 요렇게 해버리면 아무 의미없는 부모 요소가 생성되게 됨!
</script>
</body>DocumentFragment의 특징!
- DocumentFragment를 DOM노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고, 그 자식 노드들만 추가됨
- DocumentFragment를 DOM에 추가하면 DocumentFragment 노드의 자식 요소들은 더 이상 메모리에 존재하지 않음
-> 자동으로 메모리에서 삭제됨!
=> 이러한 특징 때문에 요소를 여러개의 각기 다른 부모 요소에 집어 넣을 때 더욱 깔끔한 코딩이 가능함!
<body>
<div class="container"/>
<div class="container"/>
<div class="container"/>
<script>
let elements = [];
for(let i=0; i<100; i++) {
conse el = document.createElement('div');
elements.push(el);
}
const cont = document.querySelectorAll(".container");
for(let i=0; i<cont.length; i++) {
for(let j=0; j<elements.length; j++) {
cont[i].appendChild(elements[j].cloneNode(true));
// 이렇게 할시, 배열은 참조 타입이기 때문에 el 자체를 복사할 수 있게끔
}
}
</script>
</body><body>
<div class="container"/>
<div class="container"/>
<div class="container"/>
<script>
const frag = document.createDocumentFragment();
let elements = [];
for(let i=0; i<100; i++) {
conse el = document.createElement('div');
elements.push(el);
frag.appendChild(el);
}
const cont = document.querySelectorAll(".container");
for(let i=0; i<cont.length; i++) {
cont[i].appendChild(frag.cloneNode(true));
// 한번에 뽝 자식 생성!
}
</script>
</body>정리
- DocumentFragment 노드
1) 오직 메모리상에만 존재하는 경량화된 DOM
2) DocumentFragment를 DOM노드에 추가한다고 해도 DocumentFragment 노드 자체는 추가되지 않고 그 자식 노드만 추가됨
3) DocumentFragment를 DOM에 추가할 때, DocumentFragment의 자식노드는 더 이상 생성한 메모리상의 위치에 존재하지 않음. 만약 이를 유지시키고 싶다면 cloneNode를 통해 복제하는 방법이 존재
Front-End Developer