DOM Node 조작하기

• 들어가기 전에

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

• 학습 목표

1. 다양한 DOM(Document Object Model) APIs를 이해한다.

2. element와 text node를 생성해서 화면에 추가할 수 있다.

• 학습 목표

- DOM APIs

- 다양한 DOM 속성과 메소드들

- createElement, CreateTextNode, appendChild

- insertBefore, innerText, innerHTML, insertAdjacentHTML

• DOM 조작하기 API

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

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

• 몇가지 유용 DOM 엘리먼트 속성

- tagName : 엘리먼트의 태그명 반환

- textContent : 노드의 텍스트 내용을 설정하거나 반환

- nodeType : 노드의 노드유형을 숫자로 반환

• DOM 탐색 속성

- childNodes

· 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)

- firstChild

· 엘리먼트의 첫 번째 자식 노드를 반환

- firstElementChild

· 첫 번째 자식 엘리먼트를 반환

- parentElement

· 엘리먼트의 부모 엘리먼트 반환

- nextSibling

· 동일한 노드 트리 레벨에서 다음 노드를 반환

- nextElementSibling

· 동일한 노드 트리 레벨에서 다음 엘리먼트를 반환

• DOM 조작 메소드

- removeChild()

· 엘리먼트의 자식 노드 제거

- appnedChild()

· 마지막 자식 노드로 자식 노드를 엘리먼트에 추가

- insertBefore()

· 기존 자식노드 앞에 새 자식 노드를 추가

- cloneNode()

· 노드를 복제

- replaceChild()

· 엘리먼트의 자식 노드 바꿈

- closet()

· 상위로 올라가면서 가장 가까운 엘리먼트를 반환

• HTML을 문자열로 처리해주는 DOM 속성/메소드

- innerText(getter, setter)

· 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환

- innerNode(getter, setter)

· 지정된 엘리먼트의 내부 HTML을 설정하거나 반환

- insertAdjacentHTML()

· HTML로 텍스트를 지정된 위치에 삽입

· beforebegin : element 앞에 삽입

· afterbegin : element 안에 가장 첫번째 child

· beforeend : element 안에 가장 마지막 child

· afterend : element 뒤에