[JavaScript] DOM(Document Object Model)과 querySelector

DOM

• DOM Tree
• DOM API
• querySelector

자바스크립트를 배우고 DOM에대한 이해가 없이 무작정 JQuery를 몇 개 외워서 사용했었는데, 참...속 빈 강정이었던 같았습니다.

이번 기회에 좀 정리를 해보고가면 좋을 것 같습니다.

보통 컴파일러가 코드를 해석할 때 트리구조로 데이터를 구조화하는 걸 봤었습니다. 

브라우저 역시 HTML 코드를 DOM이라는 객체 형태모델로 저장을 합니다. 이런 트리로 저장된 정보를 DOM Tree라 부릅니다

우리가 어떤 웹사이트에서 댓을을 달고, 우리의 반응에 따라서 HTML의 구조와 데이터가 계속적으로 변경됩니다. 

자바스크립트로 이런 변경을 해줄 수 있는데 DOM이라는 트리의 구조체가 만들어져 있으므로 변경이 용이합니다.

우리가 이런 DOM Tree를 탐색해서 변경을 해야하는데, DOM Tree는 매우매우 복잡해질 수 있습니다. 따로 탐색알고리즘을 구현하기 힘들기 때문에 브라우저가 DOM을 통해서 다양한 DOM API(함수 묶음)을 제공합니다.

getElementById()

이 메서드로 id를 통해서 Element객체를 찾을 수 있습니다. id는 document 내에서 유일하기 때문에 특정 요소를 빨리 찾을 때 용이합니다.

//Gmarket사이트에서 getElementById()로 해당 id를 통해서 element객체를 찾을 수 있다.

document.getElementById("hMainLogo");

Element.querySelector()

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

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

id가 없는 요소에 접근하려면 Document.querySelector()를 사용합니다. 모든 선택자를 사용해 탐색할 수 있습니다.

// Gmarket사이트에서 카테고리 검색. css selector를 그대로 이용해서 탐색할 수 있다.

// id는 #으로 class는 . 으로 검색

document.Element.querySelector("#all #displayAllCategory");

document.Element.querySelector("#all > #displayAllCategory");

추가적으로 공부하다 김정환님의 블로그 http://blog.jeonghwan.net/2018/01/25/before-jquery.html 에 잘 설명해주셔서 이해하기 좋았습니다 :)

[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다