JS - DOM 심화 : createDocumentFragment, template tag, element 와 node 의 차이점, children과 childrenNodes의 차이점offsetTop, ,offsetWidth ,HTML과 DOM 차이

<포스팅 주요 내용>

• createDocumentFragment
• template tag
• element 와 node 의 차이점
• children과 childrenNodes의 차이점
• offsetTop
• offsetWidth
• HTML과 DOM 차이

---

효율적 DOM 제어 : createDocumentFragment

개념 : DocumentFragment는 기본적으로 DOM과 동일하게 동작하지만, HTML의 DOM 트리에는 영향을 주지 않으며, 메모리에서만 정의됩니다.

왜 필요한가?

예를 들어, 여러개의 li 태그를 가지고 있는 ul 태그를 조건에 따라 추가해야 한다면 기존에는 div 태그등을 만들어서 그 안에 ul 및 li 태그들을 생성, 추가 한두에 조건에 따라 추가해 주었습니다. 

 

이 경우 브라우저에는 보이지 않지만 DOM 트리에 연결되지 않을 뿐 생성된 상태입니다. 또한 해당 div 태그를 DOM 트리에 연결(추가)하고 난 후에도 div Element 내용은 변경되지 않고 동일합니다. 하지만 만약에 해당 내용이 추가한 후에 더이상 필요가 없는 경우나,  ul 태그를 div 로 감싸고 싶지 않은 경우에 DocumentFragment는 유용하게 사용할 수 있습니다. 
(elem.appendChild(documentFragment) 시  documentFragment는 추가하지 않음)

 

---

template tag 사용법

HTML <template> 요소는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다.

 

예제

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 -->
  </tbody>
</table>

<!-- template -->
<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다
if ('content' in document.createElement('template')) {

    // 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다
    var t = document.querySelector('#productrow');

    // 새로운 열을 복제하고 테이블에 삽입합니다
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);
    td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tb.appendChild(clone);

} else {
  // HTML 템플릿 엘리먼트를 지원하지 않으므로
  // 테이블에 열을 추가하는 다른 방법을 찾습니다.
}

---

element 와 node의 차이

• Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 

 

children 과 childrenNodes의 차이

• children : 현재 요소의 자식 요소가 포함된 HTMLCollection
• childrenNodes : 현재 요소의 자식 노드가 포함된 NodeList를 반환합니다. 이때 반환되는 NodeList에는 요소 노드뿐만 아니라 주석 노드와 같은 비 요소 노드를 포함합니다. 

 

좌표 정보 조회 : offsetTop

-> HTMLElement.offsetTop읽기 전용 속성은 노드 상단의 내부 경계를 기준으로 현재 요소의 외부 경계의 거리를 반환 합니다 

 

크기 정보 조회 : offsetWidth

-> 일반적으로 엘리먼트의 전체 크기를 알고 싶다면, `offsetWidth`와 `offsetHeight` 속성을 가져오면 된다. 이 속성은 엘리먼트의 패딩과 보더, 스크롤바의 사이즈를 포함한 값을 리턴한다.

 

<DOM 구조 파악하기, HTML 과 DOM 의 닮음>

DOM은 원본 HTML 문서를 파싱한 객체 기반 표현 방식입니다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점입니다.
DOM의 개체 구조는 “노드 트리”로 표현됩니다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문입니다. 

 

참고

console.dir(elem) : elem 이 자바스크립트 객체라면 console.log(elem)과 같은 결과를 출력. elem이 DOM 요소일 때는 DOM을 객체처럼 취급하여 출력.

** elem이 DOM 요소일 때 console.log(elem)은 DOM트리를 출력