DOM(Document Object Model)과 querySelector

DOM(Document Object Model)

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

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

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

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

그래서 브라우저에서는 DOM이라는 개념을 통해서, 다양한 DOM API를 제공한다.

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

getElementById()

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

한번 아마존 사이트에 들어가서 이 메소드를 이용해서 찾아보자.

위의 사진에서 보면 메뉴에서 Cart위에 숫자를 나타내는 부분의 id가 "nav-cart-count"임을 알 수 있다.

이 id를 이용해서 여러가지 속성을 검색해보면 다음과 같이 나온다.

다음과 같이 Id를 통해 속성으로 타고들어가 설정을 해보는것도 가능하다.

위의 Cart에 보면 원래 숫자여야하는게 지정해준 문자로 바뀌어있는것을 볼 수 있다.

Element.querySelector()

DOM을 찾는데 특히 유용한 querySelector 메서드이다.

CSS 스타일을 결정할 때 사용하던, Selector 문법을 활용해 DOM에 접근할 수 있다.

DOM을 찾을 때 querySelector만 써도 충분하고 빠르다.

비슷한 querySelectorAll 이라는 메서드도 있는데 이 메서드같은 경우에는

만약 div를 검색한다면 이름이 div인 모든 Element가 다 나온다.

아래는 querySelector을 사용한 예시이다.

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/16699/