[JavaScript] DOM(querySelector)

DOM(Document Object Model)

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

그렇게 저장된 정보를 DOM Tree라고 하며, 결국 HTML element는 Tree형태로 저장된다.

브라우저 동작 방식 - HTML Parser

https://hhlin.tistory.com/4?category=764229

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

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

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

DOM Tree

document : html의 최상위 요소

getElementById()

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

querySelector()

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

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

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

querySelectorAll

해당하는 모든 요소의 리스트가 나온다.

CSS Selector

selector 문법은 querySelector와 querySelectorAll 메서드에서 사용할 수 있으며, CSS 스타일을 부여했을 때 익혔던 selector 문법과 동일하다고 생각하고 사용할 수가 있다.

다양한 CSS Selector 문법을 사용해서 원하는 엘리먼트를 찾을 수 있다.

참고자료

https://www.edwith.org

https://en.wikipedia.org/wiki/Document_Object_Model