[이론] JS - 문서 객체 모델(DOM)

DOM은 JS언어의 일부가 아니며, JS로 HTML 문서를 조작하기 위한 모델이다.

 

즉 JS로 HTML을 조작하는데, 이것을 Document Object Model을 통해서 변경한다.

 

HTML은 Node로 가득한 문서이다.(HTML의 요소 하나하나가 Node이며 트리구조다.)

 

DOM 또한 노드들이 트리 구조로 구성되어있다.

 

 

tag(노드)들이 트리로 구성

 

 

 

JS에서 특정 HTML 속성들을 가져오는 방법에는 여러가지가 있는데,

 

document.getElementById

document.getElementsByClassName

document.getElementsByTagName

 

이 세가지가 고전적인 방법이며 각각 id, class, tag를 가져오는 방법이다.

 

이 모든 요소를 가져올 수 있는, 비교적 최근에 나온것이 바로 querySelector이다.

 

document.querySelector('#id')

document.querySelectorAll('li')

 

이들을 통하여 DOM을 선택한 다음 변수에 넣어서 DOM을 조작할 수 있다.

 

const my_btn = document.querySelector('.link_direct')

my_btn.textContet -> text를 가져오거나

my_btn.textContet = 'Hello'   => text를 조작할 수 있다.

 

이 밖에도 innerHTML 등 많은 속성들을 사용하여 DOM를 조작 및 변경 할 수 있다.