querySelector는 무엇인가?

hwibaski·2021년 7월 2일

TypeScript & JavaScript

목록 보기

3/15

querySelector()를 몇 번은 사용해봤다. 사용할 때마다 '아~ 이거 html 태그 선택해주는 건가보다.' 하고 항상 넘어갔다. 결론적으로는 그게 맞을지도 모르겠다. 하지만 확실하게 정리하고 넘어가고 싶어서 더 알아봐야겠다.

그래서,

querySelctor()는?

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

사용법

document.querySelector('선택자');

예제

index.html

<body>
  <div class="element">
    <h1> Hello Wolrd</h1>
  </div>
  
  <script>
  	let El = document.querySelector('.element')
	let h1El = El.querySelector('h1')

	console.log(El);     //<div class="element>...</div>
	console.log(h1El);   //<h1> Hellow Wolrd </h1>
  </script>
</body>

querySelectorAll()

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

사용법

elementList = parentNode.querySelectorAll('선택자');

예제

index.html

<body>
  
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>

  <script>
    let El = document.querySelectorAll('.element')

    console.log(El);     // Nodelist(4)를 반환한다. 이 NodeList에는 class가 element인 div 4개가 포함되어 있다.
  	
  </script>
</body>