자바스크립트 querySelector() 에 대하여

querySelector() 는 자바스크립트에서 DOM 요소를 선택할 때 수도 없이 사용하는 선택자이다.

 

지금 당장 자신이 짠 js파일에 ctrl+f를 누르고 querySelector() 를 검색해보면 일치하는 결과가 수십개씩 나올것이다.

 

이번 포스팅에서는 이 querySelector() 에 대해서 간단히 알아보겠다.

 

---

 

querySelector() 는 괄호안에 인자로 넣은 값과 일치하는 요소를 찾아서 반환한다. 일치하는 요소가 없으면 null을 반환한다.

 

괄호안에는 String(문자열) 형만 넣을 수 있고, 유효한 CSS 선택자를 넣어야한다.

 

document.querySelector({name: "duknock"}) // 이딴식으로 이상한거 넣으면 당연히 안된다.

 

또한 인자로 넣은값과 일치하는 요소가 여러개라면, 제일 첫번째 요소만 반환해준다.

 

만약 일치하는 요소 전체를 반환받고 싶다면 querySelectorAll() 을 사용하면 된다.

 

querySelectorAll() 은 일치하는 요소 전체를 배열로 감싸서 반환해준다. 일치하는 요소가 하나여도 배열로 반환한다.

 

<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
<script>
    document.querySelector('.box') // <div class="box first"></div>
    document.querySelectorAll('.box') // NodeList(3) [div, div, div]
    document.querySelectorAll('.first') // NodeList(1) [div.first]
</script>

 

---

 

querySelector()는 CSS 선택자의 문법을 따른다.

 

따라서 class 를 선택할때, id를 선택할때, 요소를 속성(Attribute)에 따라 선택할 때 등 모두 CSS와 동일하다.

 

//클래스를 선택하는 방법 <div class='box'></div>
document.querySelector('.box');

//id를 선택하는 방법 <div id='box'></div>
document.querySelector('#box');

//name속성이 test인 요소를 선택하는 방법 <input name='test'></input>
document.querySelector('input[name=test]');

//클래스가 2개인 요소를 선택하는 방법 <div class='box first'></div>
document.querySelector('.box.first');

//어떤 요소의 하위 요소를 선택하는 방법 <div class='box'><span></span></div>
document.querySelector('.box span');

 

---

 

당연하지만 querySelector() 는 document 뒤에만 붙일 수 있는게 아니다.

 

다른 DOM 요소의 뒤에 붙이면 해당 요소 하위에서 선택자와 일치하는 요소를 검색하게 된다.

 

let box = document.querySelector('div.box');
box.querySelector('span'); // <div class="box"> 의 하위에 있는 <span> 을 선택한다.