DOM은 JavaScript 언어의 일부가 아니라 웹사이트를 구축하는 데 사용되는 Web API.
DOM은 특정 프로그래밍 언어와 독립적으로 설계되어 문서의 구조적 표현을 일관된 단일 API에서 사용할 수 있습니다.
- createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
<template>: The Content Template element - HTML: HyperText Markup Language | MDN
The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
developer.mozilla.org
<template> 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용
<template> 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다. 하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다.
<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다. 만약 <template> 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다.
- element와 node의 차이를 이해할 수 있다.
Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다.
- children과 childNodes의 차이를 이해할 수 있다.
자식으로 갈 때는 children(텍스트 노드 제외)또는 childNodes(텍스트 노드 포함)를 사용합니다
- remove와 removeChild의 차이를 이해할 수 있다.
remove() 는 노드를 메모리에서 삭제하고 종료합니다.
removeChild()는 노드를 삭제하는 것이 아닙니다.
Here is why appendChild moves a DOM node between parents - JavaScript inDepth
A light introduction into DOM fundamentals through an insightful quiz. You'll learn how HTML is transforms into JavaScript objects to eventually become part of the Document tree.
indepth.dev
- 좌표 정보 조회를 할 수 있다. - offsetTop...
- 크기 정보 조회를 할 수 있다. - offsetWidth...
표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, offsetWidth와 offsetHeight 속성을 사용하세요:
Further Study
아래 키워드에 대해서 직접 검색하여 학습하세요.
- element와 node의 차이 (difference between element and node in javascript dom)
- children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
- removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
- tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
- tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
