[자바스크립트] Document.querySelector()

Document.querySelector() 란?

제공한 선택자 혹은 선택자 뭉치와 일치하는 문서 내 첫 번째 element를 반환 합니다

일치하는 요소가 없으면 null을 반환합니다.

Document.querySelector(".title")  => id가 title인 요소 반환 

Document.querySelector("#title")  => class가 title인 첫 번째 요소 반환

 

()중괄호 안에 # 과 .(마침표) 가 들어갈 수 있는데

오늘 개인 프로젝트를 진행 중 # class 요소만 반환하는 방법을 알고 있었기에

id 값 요소를 가져오지 못했다.

 

Error

app.js:29 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')at

 

원인으로는 HTML이 로드되기전에 자바스크립트 영역에서 HTML을 참조하기 때문이라고 한다.

addEventListener에서 HTML 태그를 참조할 수가 없어 null 값을 참조하게되 에러가 발생한 것.

<script  src="app.js"></script>

가 body 테그 아래로 이동시켜 HTML의 로드가 끝나면 script의 영역을 부르게 하는 방법이 있다.

하지만,

<script defer src="app.js"></script>

필자는 defer 속성을 추가였기에

• defer 속성은 페이지가 로드된 후 해당 외부 스크립트가 실행 되게 함.

첫 번째의 원인은 아니였다.

 

두번째 해결

window.onload = function(){} 함수로 웹브라우저의 모든 구성요소에 대한 로드가 끝이 났을때

호출하는 함수 를 사용 하는 것이다.

 

그런데, 나의 문제는 로드의 시기때문이 아닌 것이다.

 

알아보던중 가져오는 값이 id 인가 class 인가에 따라 사용해야하는 부호가 달랐던 것이다.

const cardBox = document.querySelector("#card-box")

에서  나는 card-box 가 id로 되어있기 때문에 

const cardBox = document.querySelector(".card-box")

이런 식으로 작성해 주었어야 한 것이다.

 

느낀 것

해결하고나니 정말, 어이가 없었다.

HTML이 값을 참조 할 수 없다 라는 것을 알고 방법들을 찾아 시도해 보았지만, 결국 해결을 못하여

querySelector의 사용법까지 찾아 보아 알게 되었는데.

 

Jquery를 사용할땐 $("#")으로만 배워 그냥 요소를 가져온다고만 알고 있었기에

어떤식으로 작동되는 것인지는 전혀 몰랐던 것이다.

사용법도 알아야하겠지만, 어떻게 작동되는 것인가

결국 기초를 아는 것이 정말 중요하다고 느꼈다.

 

- ${} 템플릿리터널과는 다른것

 

참고 : https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

Document.querySelector() - Web API | MDN