DOM

• 브라우저에서는 HTML 코드를 DOM(Document Object Model)이라는 객체 형태의 모델로 저장.

• HTML element는 Tree형태로 저장.

• 복잡한 DOM Tree를 탐색하기위해서 브라우저는 다양한 DOM API를 제공.

  getElementById()

• 태그의 ID를 이용해 element 찾을 수 있음.

  querySelector(), querySelectorAll()

• 쿼리를 통해 element를 찾을 수 있음.

• css selector

  ID는 #

 <div id="name">Park</div>
  -> document.querySelector("#name");

Class 는 .

 <div class="name">Park</div>
 -> document.querySelector(".name");

자식 element를 찾으려면

 <div class="name">Park
  <div class="firstName">Jinhyung</div>
</div> 
 -> document.querySelector(".name .firstName");