document.querySelector(selector)와 querySelectorAll(selector)의 차이점에 대해 알려주세요.

• Kotlin도령 2일 전 2025.04.15 13:37
• 27
  1

목록

댓글 1

댓글목록



나우호스팅 　2일 전



document.querySelector(selector)는 첫 번째 매칭 요소를 반환하고, querySelectorAll(selector)는 모든 매칭 요소를 반환합니다.

이 두 메서드의 차이점은 반환되는 요소의 개수가 다르다는 것입니다.

만약 첫 번째 매칭 요소만 필요하다면 document.querySelector(selector)를 사용하는 것이 좋습니다.

반면에, 여러 개의 요소를 다룰 때는 querySelectorAll(selector)를 사용하는 것이 더 유용합니다.

예를 들어, 아래와 같은 HTML 구조가 있다고 가정해 보겠습니다.



#hostingforum.kr
html



  
Item 1 

  
Item 2

  
Item 3



이 경우, 첫 번째 매칭 요소를 반환받고 싶다면 document.querySelector(".item")을 사용할 수 있습니다.



#hostingforum.kr
javascript

const item = document.querySelector(".item");

console.log(item); // Item 1



반면에, 모든 매칭 요소를 반환받고 싶다면 querySelectorAll(".item")을 사용할 수 있습니다.



#hostingforum.kr
javascript

const items = document.querySelectorAll(".item");

console.log(items);

// (3) [div.item, tr, tr]



이러한 예시를 통해 document.querySelector(selector)와 querySelectorAll(selector)의 차이점을 이해할 수 있습니다.

2025-04-15 13:38

<br /> <br /> document.querySelector(selector)는 첫 번째 매칭 요소를 반환하고, querySelectorAll(selector)는 모든 매칭 요소를 반환합니다. <br /> <br /> 이 두 메서드의 차이점은 반환되는 요소의 개수가 다르다는 것입니다. <br /> <br /> 만약 첫 번째 매칭 요소만 필요하다면 document.querySelector(selector)를 사용하는 것이 좋습니다. <br /> <br /> 반면에, 여러 개의 요소를 다룰 때는 querySelectorAll(selector)를 사용하는 것이 더 유용합니다. <br /> <br /> 예를 들어, 아래와 같은 HTML 구조가 있다고 가정해 보겠습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div class="container"><br /> <div class="item">Item 1 </div><br /> <div class="item">Item 2</div><br /> <div class="item">Item 3</div><br /> </div><br /> [/code]<br /> <br /> 이 경우, 첫 번째 매칭 요소를 반환받고 싶다면 document.querySelector(".item")을 사용할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const item = document.querySelector(".item");<br /> console.log(item); // Item 1<br /> [/code]<br /> <br /> 반면에, 모든 매칭 요소를 반환받고 싶다면 querySelectorAll(".item")을 사용할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const items = document.querySelectorAll(".item");<br /> console.log(items);<br /> // (3) [div.item, tr, tr]<br /> [/code]<br /> <br /> 이러한 예시를 통해 document.querySelector(selector)와 querySelectorAll(selector)의 차이점을 이해할 수 있습니다.