template 태그 & fragment

* HTML <template> 요소

 - 페이지를 불러오고 바로 화면에 표시되지는 않음

 - <template> 안에 담긴 HTML 코드를 JavaScript를 이용해 인스턴스로 생성할 수 있음

 - 템플릿이 담고 있는 DOM 하위 트리를 나타내는 DocumentFragment인 content 속성을 가짐

 

 

 

 - template 태그의 예시

 

<template id="commentTemplate">
  <li class="comment">
    <div class="username"></div>
    <div class="body"></div>
    <button>좋아요</button>
  </li>
</template>

<ul id="comments"></ul>

 

 - 위의 예시에서 li에 접근하기 위해서는 template -> content -> children[0] 으로 접근

 - children이 HTMLCollection의 유사배열 형태이기 때문에 인덱스를 적어줘야 함

 

 

 

 - username에 접근하기 위해서는 template -> content -> children[0] -> children[0] 으로 접근

 

 

 

 - template 태그 안에 작성된 HTML 코드를 화면에 표시하기 위해서는 JavaScript를 이용해 인스턴스를 생성

 

let template = document.querySelector("#commentTemplate");
// querySelector로 작성된 template HTML코드를 가져온다

let newContent = document.importNode(template.content, true);
// 외부 문서의 노드 === 가져온 template 코드를 복사해 현재 문서에 넣어준다
// let 추가될 노드 = document.importNode(다른 문서에서 가져올 노드, 자식 요소들까지 가져올지: Boolean)

document.querySelector("#comments").appendChild(newContent);
// 해당 아이디를 가지는 ul에 복사된 노드를 조립

 

 - 먼저 querySelector로 작성된 template HTML코드를 가져온다.

 - importNode를 이용해 외부 문서의 노드 === 가져온 template 코드를 복사해 현재 문서에 넣어준다.

    -> let 추가될 노드 = document.importNode(다른 문서에서 가져올 노드, 자식 요소들까지 가져올지: Boolean)

 - 해당 아이디를 가지는 ul에 복사된 노드를 조립한다.

 

 

 

* DocumentFragment

 - 부모가 없는 단순한 형태의 문서 객체를 나타냄

 - DOM 서브트리를 조립해서 DOM에 삽입하기 위한 용도로 사용됨

 - 활성화된 문서 트리의 일부가 아니다

 - 그렇기 때문에fragment에 가하는 변경사항은 분서에 영향을 주지 않고, 성능에 큰 영향을 미치지 않음

 - <template> 요소도 template.content 속성에 DocumentFragment를 가지고 있음

 - 빈 DocumentFragment는 document.createDocumentFragment( ) 를 이용해 생성

 

 

 - fragment 삽입 예시

 

const fragment = document.createDocumentFragment();
[1, 2, 3, 4].forEach(elem => {
  const div = document.createElement("div");
  div.style.border = "1px solid black";
  div.style.width = "100px";
  div.style.height = "100px";
  fragment.appendChild(div);
});
container.appendChild(fragment);

 

 - document.createDocumentFragment( ) 를 이용해 div 4개를 생성하고 container에 조립해준다.