DOM과 getElementById, querySelector

• DOM

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

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

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

자바스크립트는 DOM의 속성들을 삭제하고, 추가하는 역할을 할 수 있음

브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공하여, 자바스크립트가 요소를 찾는 것을 도움

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

• getElementById()

구글의 검색창 id가 "f"이므로 getElementById로 선택한 후 style을 변경하여 보이지 않게 함

• querySelector()

위와 같은 방식으로 검색창을 보이지 않게 하는데, 이번에는 querySelector를 활용

(id는 #, class는 .을 사용해서 선택 - 그냥 쓰면 tag명을 찾음)

※ 자식을 지칭할 때는 다음에 적어주면 된다(바로 아래 자식은 >를 사용해서 선택 - css selector)