개발.코딩

자바스크립트 javascript Dom querySelector, querySelectorAll 차이

스마트스타일 2021. 7. 16. 15:46
반응형

자바스크립트 javascript Dom querySelector(), querySelectorAll() 차이 

자바스크립트에서 Dom으로 Html을 조작할때 필수적으로 써야하는 코드중 하나는 querySelector이다. html의 class나 id, 특정node들에 접근하기 위해 처음배울시기에 잘모를때부터 그 의미도 정확하게 알지도 못하고 실습으로 먼저 체득했던 기억이 있다. 그렇게 코드를 해오다가 querySelectorAll이라는 녀석이 있다는 것도 떠올리게 되었고, 어떤 기능일지 잠시 상상해보았으나 전혀 감이 잡히지 않는 것이었다. querySelector는 내가 필요한 것만 집어서 사용하게 해주는 것이라는것을 알고 있는데 거기에 겨우 All을 붙인다고해봤자 전체를 어떻게 하겠다는 것인지.. 이런 느낌으로 상상이 안되 이참에 배워보려고 한다. 한마디로 글쓴이가 헷갈리고 몰라서 공부하고 정리하는 블로그입니다.

 

1.우선 querySelector는 무엇인가?

아마 querySelector는 대부분 알고 계셨기에 querySelectorAll과의 차이를 궁금해서 들어오셨을 것이라 생각합니다. 그래도 모르고 있으실 분들을 위해 집고 넘어가자면 querySelector는 셀렉터를 조회한다는 의미를 가지고 있습니다. query라는 단어의 뜻 자체가 질문하다의 의미를 가지고 있습니다. 그래서 내가 찾고 하자는 셀렉터가 있니? 라는 의미로 느낌적인 느낌으로 사용되고 있는 것입니다.

<body>
    <div class='namebox'>나의 클래스 이름은 'namebox'</div>

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

위와 같은 html코드를 가졌을때,

const nameBox = document.querySelector('.namebox')

이렇게  'namebox'라는 클래스를 가지고 있는 html tag코드에 접근하였고, 그 html tag를 자바스크립트에서 선언한 변수 nameBox에 할당하게 되었습니다. 

console.log(nameBox);

그래서 nameBox에 뭐가 있을지 궁금해서 조회해보면

이렇게 namebox클래스를 가진 태그 전체를 불러 오게 됩니다. 

웹에 렌더링 된 내용

무튼 querySelector란 녀석은 이런녀석이라는 것을 알아냈고, querySelectorAll로 넘어가봅시다.

 

2.그렇다면 querySelectorAll은 무엇인가?

언뜻보면 all이기도 하고 확장된 기능이고, 전체를 싹~해다 해줄것 같고 편해보이고 좋아보입니다. 그래서 쓰려고 봤더니 어떻게 사용될지 상상이 안되기 시작합니다. 그래서 오늘 블로그를 작성하게 만든 이유인데요. 일단 테스트부터 바로 보시죠.

 

class이름이 namebox인 태그가 여러개 있어야 할것 같기 때문에 각tag종류별로 여러개 만들어 보았습니다.

<body>
    <textarea class='namebox'>나의 클래스 이름은 'namebox'</textarea>
    <div class='namebox'>나의 클래스 이름은 'namebox'</div>
    <button class='namebox'>나의 클래스 이름은 'namebox'</button>
    <p class='namebox'>나의 클래스 이름은 'namebox'</p>
    <input class='namebox'>나의 클래스 이름은 'namebox'</input>


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

이 상태에서 

const nameBox = document.querySelector(".namebox");
const nameBox2 = document.querySelectorAll(".namebox");

console.log(nameBox);
console.log(nameBox2);

querySelector와 querySelectorAll를 적용하고 각각 console.log를 찍어 보았습니다.

그 결과 querySelectorAll는 각 요소를 배열로 반환하는 모습을 볼 수 있었습니다. 그래서 각각의 배열요소를 console.log를 찍어보겠습니다. 그래서 보니까 객체를 요소로 갖는 배열이 반환되었습니다. 각 객체요소에는 무엇이 들어있을지 예상은 가지만 진짜 들어있는지 궁금합니다. 그래서 반복문을 돌려 꺼내보도록 하겠습니다.

const nameBox = document.querySelector(".namebox");
const nameBox2 = document.querySelectorAll(".namebox");

console.log(nameBox);
console.log(nameBox2);

for (let n = 0; n < nameBox2.length; n++) {
  console.log(nameBox2[n]);
}

이렇게 진짜 모두를 긁어오는 것을 확인할 수 있었습니다.

 

3.[결과]차이점

1)querySelectorAll는 찾고자하는 클래스이름을 가진 node를 모두 찾아오는반면, querySelector은 querySelectorAll로 찾은 것들중 첫번째 요소만 조회하고 끝난다.

console.log(Boolean(nameBox === nameBox2[0]));

nameBox === nameBox2[0]//true 이다.

 

2)querySelector는 직접 태그를 가져오지만(ex:

querySelectorAll은 객체가 들어있는 배열을 리스트를 리턴한다. 배열에서 필요한것을 꺼내써야한다.

 

4.활용

 활용은 케바케에 따라 다르겠지만, dom으로 태그생성시에는 querySelector을 쓰면 직접 태그에 접근하기때문에 편하고. querySelectorAll는 이미 만들어진 tag들에 접근하여 수정이 필요할때 반복문이나 map메소드를 이용할때 편할것 같다.

 

5.결론

 둘중에 querySelector만 쓰면 장땡일줄 알았으나, 상황에 따라서 querySelectorAll도 필요하다. 여기까지 정독하신 여러분은 개발열정뿜뿜 개발자~ 고생하셨습니다.

 

반응형