[HTML&CSS] DOM과 querySelector 정리

오늘은 DOM과 쿼리셀렉터에 대해 포스팅할려고한다.

만약 HTML이 구조란게 없이 막짜여지면 가독성도 떨어지고 여러모로 안좋을 것이다. 그래서 구조적인 모델로 짜기위해  DOM이라는 모델을 기준으로 한다.

 

 

 

1. DOM

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

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

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

Dom tree

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

그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있습니다.

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

 

2. getElementById()

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

MDN사이트를 참고해서 이를 테스트해봅시다.

테스트를 할 때는 특정 웹사이트에 접속한 후, 크롬 개발자도구-콘솔을 열어서 그곳에서 코딩을 해보면서 찾을 수 있습니다. 

 

3 Element.querySelector() <주요>

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

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

DOM을 찾을 때 querySelector만 써도 충분하고 빠릅니다.

참고로, 비슷하지만 다른 querySelectorAll이 있습니다. 

이 녀석은 어떤 역할을 하는지, 그 반환 값은 무엇인지 확인해보세요.

특정 웹사이트에 접속한 후, 크롬 개발자도구를 열어 콘솔 창에서 querySelectorAll을 활용해서 다양한 UI 영역을 찾아보세요.

 

 

==> 쿼리셀레터에 대하 좀 더 설명을 덧붙이자면 기존에 getElemetById를 좀더 업글해서 나온 상위버전이라고도 볼 수 있으며 querySelector만으로도 getElementById 기능을 포함하여 더 확장되어 사용이가능하므로 이 쿼리셀렉터를 잘 이용하면 된다. 

 

쿼리셀렉터의 공식 설명은 다음과같다.

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

구문은 다음과 같다.

==> document.querySelector(selectors); 

 

반환값은 다음과 같다. 

==> 제공한 CSS 선택자를 만족하는 첫 번째 Element 객체. 결과가 없다면 null.

선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용하세요.

---

querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환합니다

 

다음은 querySelectorAll()의 반환값에 대한 추가설명이다.

==>지정한 셀렉터와 하나라도 일치하는 각 엘리먼트에 대한 하나의 Element 를 포함하는 살아 있지 않은 NodeList. 일치하는 것이 없는 경우에는 비어 있는 NodeList.

노트: 지정한 selectors 가 CSS 가상 엘리먼트를 포함하면, 반환 리스트는 항상 비어있습니다.

 

다음은 구문이다.

==> elementList = parentNode.querySelectorAll(selectors);

 

4. css selector

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

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

 

---

몇가지 간단한 예시를 실험해보았다.

class클래스 선택자는 .(점)을 붙여야한다 주의

 

해당 태그의 내용이 사라짐을 볼 수 있다. 아이디 셀렉터는 #을 붙여야한다.

 

 

getElemetById를 이용해서 위에서 했던거와 같은 것을 해봤다. 쿼리셀렉터로도 getElemetById의 기능을 쓸 수 있음을 볼 수 있다.

 

 

querySelectorAll()의 결과이다.

 

 

나중에 제이쿼리를 사용하면 이것보다 더 편리할 수 있겠지만 기본이니 알아두면 좋을것 같다.

 

 

댓글과 공감은 큰 힘이됩니다.!

 

 

출처 : https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll 

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