[부스트코스] DOM과 querySelector

DOM

브라우저에서는 우리가 열심히 코딩한 HTML코드를 해석해 DOM(Document Object Model)이라는 객체 형태의 모델로 저장한다.

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

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

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

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

 

 

getElementById()

ID정보를 통해서 엘리멘트를 찾는다.

 

querySelector()

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

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

class로 찾을 때는 '.', id로 찾을 때는 '#'을 이름 앞에 붙여준다.

 

한편, querySelectorAll()은 찾고자하는 css selector에 해당하는 태그들을 리스트 형태로 리턴한다.

 

CSS selector

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

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

 

 

 

[부스트코스 관련 강의 링크]
DOOM과 querySelector - https://www.edwith.org/boostcourse-web/lecture/16699/

[LECTURE] 2) DOM과 querySelector : edwith