DOM과 querySelector

1. DOM

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

그렇게 저장된 정보를 DOM Tree라고 한다.

결국 HTML element는 Tree 형태로 저장된다.

복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘들다.

그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있다.

브라우저는 DOM Tree를 찾고 조작하는 걸 쉽게 도와주는 여러가지 메소드를(DOM API)를 제공한다.

2. getElementById()

ID 정보를 통해서 찾을 수 있다.

3. querySelector()

노드의 하위 트리에서 첫 번째로 일치하는 Element 노드를 반환한다. 결과가 없으면 null을 반환

4. querySelectorAll()

노드의 하위 트리 안에서 일치하는 모든 Element를 포함한 NodeList를 반환. 결과가 없으면 빈 NodeList를 반환.

참고링크: https://www.edwith.org/boostcourse-web/lecture/16699/ (부스트코스)