DOM APIs 활용하기

DOM API를 활용하여 HTML을 동적으로 다양하게 변경할 수 있다.

 

 

 

 

1. DOM 조작 API

document. 으로 사용할 수 있는 APIs

HTML DOM Document Objects

 

element. 으로 사용할 수 있는 APIs

HTML DOM Element Objects

 

 

위 사이트에 간단한 예제까지 있으니 참고하면 DOM Node 조작하기가 훨씬 수월하다.

 

 

 

 

 

2. 유용한 DOM APIs

몇 가지 유용하다고 느낀 DOM APIs

(이 외에도 많은 API가 있지만, 개인적으로 자주 사용할 거 같은 API를 정리해보았다.)

 

1) DOM Document Object

addEventListener()	이벤트 핸들러를 등록한다.
getElementById()	해당하는 id 속성을 가진 element 반환한다.
getElementsByClassName()	해당하는 class 속성을 가진 element들을 반환한다. (getElement 뒤에 s가 붙어있다.)
querySelector()	괄호 안의 CSS Selector에 해당하는 첫 번째 자식 엘리먼트 노드를 반환한다.
querySelectorAll()	괄호 안의 CSS Selector에 해당하는 모든 자식 노드의 노드 리스트를 반환한다.

 

 

2) DOM Element Object

tagName	엘리먼트의 태그명을 반환한다.
textContent	노드의 텍스트 내용을 설정하거나 반환한다.
childNodes	엘리먼트의 자식 노드의 노드 리스트를 반환한다.
firstChild	텍스트, 빈 줄 등을 포함한 엘리먼트의 첫 번째 자식 노드를 반환한다.
firstElementChild	첫 번째 자식 엘리먼트를 반환한다.
parentElement	엘리먼트의 부모 엘리먼트를 반환한다.
closet()	상위로 올라가면서 가장 가까운 엘리먼트를 반환한다.
removeChild()	엘리먼트의 자식 노드를 제거한다.
appendChild()	엘리먼트의 마지막 자식 노드로 추가한다.
insertBefore()	기존 자식노드 앞에 새 자식 노드를 추가한다.
cloneNode()	노드를 복제한다.
innerHTML	지정된 엘리먼트의 내부 HTML을 설정하거나 반환한다.
insertAdjacentHTML()	HTML로 텍스트를 지정된 위치에 삽입한다.

 

 

+) querySelector, querySelectorAll은 document, element api 둘 다 해당된다.

 

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

- DOM Node 조작하기