DOM과 querySelector

• 들어가기 전에

우리는 댓글을 입력할 때 댓글이 바로 화면에 추가되는 것을 볼 수 있다. 이 외에도 받은 이메일함의 개수가 증가하기도 한다. 이렇게 HTML 내의 구조와 데이터는 변경된다. 자바스크립트로 이를 변경시킬 수도 있는데, DOM을 이해하면 된다.

• 학습 목표

1. DOM(Document Object Model)을 이해한다.

• 핵심 개념

- DOM Tree

- DOM API

- querySelector

• DOM

- 브라우저에서는 HTML 코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장한다. 그렇게 저장된 정보를 DOM Tree라고 한다.

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

- 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하면 너무 힘들다. 그래서 브라우저에서는 DOM이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있다. 브라우저는 DOM Tree를 찾고 조작하는 걸 쉽게 도와주는 여러가지 메서드(DOM API)를 제공한다.

• getElementById()

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

- ex) DOM.getElementById()

· querySelector("a") : <a> 태그를 검색

· querySelector("#a") : 'a' id를 검색

· querySelector("..a") : 'a' class를 검색

• Element.querySelector()

- DOM을 찾는데 특히 유용한 querySelector 메소드이다. CSS 스타일을 결정할 때 사용하던, Selector 문법을 활용해 DOM에 접근할 수 있다. DOM을 찾을때 querySelector만 써도 충분하고 빠르다.

- 참고로 비슷하지만 다른 querySelectorAll이 있다.

• css selector

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

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