[JS][DOM] Template (feat. textContent)

Template와 textContent 

먼저 블로그에 배운것에 관하여 정리하는 텀이 길어지게 되었는데 그동안에 배운것을 머릿속으로 정리하는데 개념이 명확하게 잡히지 않았고 배운것을 적용하는대에 정말 어떻게 해야할지 알것같으면서 잡히지 않아서 긴시간을 고통받았기 때문에 오늘 하나의 기능을 구현하고 구글에 검색해도 한국어로는 정리가 안되어 있는 것 같아 정리를 해보고자 쓰게되었다.

1. Template란.

  특별한 어플리케이션을 위한 시작점으로 사용되는 미리 작성된 형식을 가진 문서나 파일입니다. 즉, 형식(Format)은 사용될 때마다 매번 재생성하지 않아도 됩니다. 

정의는 저렇게 나와있고 쉽게 말해서 HTML문서에서 특정한 서식을 작성해두고 JS파일에서 그 서식을 이용하여 기능을 구현할수 있도록 하는 태그이다. 또한 HTML문서에 작성해도 웹페이지상에 나타나지 않는다.

  간단한 활용 예시

<button onclick="useIt()">Use me</button>
<div id="container"></div>
<script>
  function useIt() {
    var content = document.querySelector('template').content;
    
    var span = content.querySelector('span');
    span.textContent = parseInt(span.textContent) + 1;
    document.querySelector('#container').appendChild(
        document.importNode(content, true));
  }
</script>

<template>
  <div>Template used: <span>0</span></div>
  <script>alert('Thanks!')</script>
</template>

 

위의 코드는 버튼이 클릭되면 작성된 template를 이용하여 간단한 알림을 출력해주고 몇번 사용되었는지 카운트해주는 기능을 가지고있다.

1. template를 셀렉하고 content(.content 속성은 템플릿의 내부를 포함하는 읽기 전용의 DocumentFragment입니다) 에 쉽게 접근하도록 변수를 지정해준다, 그 이후에는 template.content에 있는 내용을 넣어줄 태그 또는 클래스명 or ID를 선택.

2. textContent를 이용하여 내용을 넣어준다.

3. 넣고자하는 위치의 엘리먼트에게 상속자를 지정(importNode = 함수안에서 적용된 템플레이트의 형식을 복사해서 붙여준다.)
여기에서 true는 자식을 복사할 것이냐 마느냐를 정해주는 것이다 false는 하위의 노드를 복사하지 않는다 (또한 클론노드로도 사용가능하다)