DOM node 생성과 추가

• 들어가기 전에 DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있습니다. DOM APIs에서는 다양한 메서드와 속성을 지원하고 있으니 이를 활용하는 방법을 배울 필요가 있습니다. 이제 부터 배울 다양한 DOM API는 라이브러리를 쓰는 것보다 대체로 더 빠릅니다.(그 차이가 크진 않습니다.)물론 라이브러리보다 그 사용법이 불편하고 어려울 수는 있습니다. 하지만 low-level의 DOM API를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그 동작을 이해하고 유추하기가 쉽고 어떤 문제를 해결할때도 더 유리할 것입니다. 따라서 다양한 DOM APIs를 잘 배울필요는 분명합니다.

---

학습 목표

1. 다양한 DOM(Document Object Model) APIs를 이해합니다.
2. element와 text node를 생성해서 화면에 추가할 수 있습니다.

핵심 개념

• DOM APIs
• 다양한 DOM 속성과 메서드들
• createElement, CreateTextNode, appendChild

학습하기

1. 다양한 APIs

document. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_document.asp element.으로 사용할 수 있는 APIs https://www.w3schools.com/jsref/dom_obj_all.asp

2. DOM 탐색 APIs

몇 가지 유용한 속성

• tagName
• textContent
• nodeType 이동
• childNodes
• firstChild
• firstElementChild
• parentElement
• nextSibling
• nextElementSibling

3. DOM 조작 API

삭제, 추가, 이동, 교체를 위해서는 아래 API 사용법을 잘 익혀두면 좋습니다.

• removeChild()
• appendChild()
• insertBefore()
• cloneNode()
• replaceChild()
• closest() //상위로 올라가면서 근접 엘리먼트 찾기