DOM과 querySelector

1. DOM
브라우저에서는 HTML코드를 DOM이라는 객체형태의 모델로 저장한다. 그렇게 저장된 정보를 DOM Tree라고 한다.
결국 HTML element는 Tree형태로 저장된다.

브라우저는 DOM이라는 개념을 통해서 다양한 DOM API를 제공하고 있다.
브라우저는 DOM Tree를 찾고 조작하는 것을 쉽게 도와주는 여러 메서드(DOM API)를 제공한다.

 

2. getElementById()
ID 정보를 통해서 찾을 수 있다.
테스트를 할 때는 특정 웹사이트에 접속한 후, 크롬 개발자 도구-콘솔을 열어서 그곳에서 코딩을 해보며 찾을 수 있다.

 

 

 

 

 

 

 

 

3. Element.querySelector()
DOM을 찾는데 유용한 querySelector메서드이다.
CSS스타일을 결정할때 사용하던 Selector문법을 활용해 DOM에 접근할 수 있다.

 

 

 

 

 

4. css selector

selector문법은 querySelector와 querySelectorAll 메서드에서 사용할 수 있으며, css스타일을 부여했을 때 익혔던 selector문과 동일하다고 사용할 수 있다. 다양한 css selector문법을 사용해서 원하는 엘리먼트를 찾을 수 있다.

 

 

 

 

 

 

 

 

참고 : boostcourse    https://www.boostcourse.org/web316/lecture/16699/?isDesc=false

웹 프로그래밍(풀스택)