자바스크립트 querySelector()와 querySelectorAll() 함수 차이점

`querySelector()`와 `querySelectorAll()` 함수

querySelector()와 querySelectorAll() 함수는 두 함수의 이름이 비슷하여 많은 사람들이 혼동하기 쉽습니다. 특히, jQuery를 사용해 DOM을 다룬 경험이 있는 개발자들은 이런 혼동을 더 많이 겪을 수 있습니다.

querySelector()와 querySelectorAll() 함수는 둘 다 HTML 문서 내에서 요소를 선택한다는 공통점이 있지만, 이 두 함수 간에는 몇 가지 중요한 차이점이 존재합니다.

querySelector() 함수는 HTML 문서 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소를 반환하지만,
querySelectorAll() 함수는 일치하는 모든 요소를 반환한다는 큰 차이점이 있습니다.

이 외에도, 두 함수의 반환 객체의 형태와 다루는 방식에도 서로 다른 차이점이 있습니다.

두 함수 비교

이 두 함수는 HTML 문서에서 CSS 선택자(Selectors)로 요소를 선택하는 데 사용됩니다. 아래는 두 함수를 비교한 내용입니다.

querySelector()와 querySelectorAll() 함수의 비교
비교 항목	`querySelector()`	`querySelectorAll()`
기능	HTML 문서 내에서 매개변수로 지정한 CSS 선택자로 요소 선택	HTML 문서 내에서 매개변수로 지정한 CSS 선택자로 요소 선택
매개변수	문자열 형식의 유효한 CSS 선택자	문자열 형식의 유효한 CSS 선택자
CSS 선택자와 일치하는 요소가 있을 경우	첫 번째 요소만 반환	모든 요소 반환
반환 값 형태	요소 노드	유사 배열 형태의 `NodeList` 객체의 목록
CSS 선택자와 일치하는 요소가 없을 경우	`null`을 반환	비어있는 `NodeList` 객체를 반환
선택한 요소 다루기	요소 노드를 다룰 수 있는 속성이나 메서드를 바로 적용	`NodeList` 객체를 `forEach()` 메서드, `for` 문, `for...of` 문 등으로 순회하면서 각 항목의 요소 노드에 접근하고, 요소 노드를 다룰 수 있는 속성이나 메서드를 적용

JavaScript - 두 함수의 선택한 요소 다루기 비교 예제

// querySelector() 사용 예제
const element = document.querySelector(".my-class"); // 첫 번째 요소만 반환
element.textContent = "querySelector()로 선택한 요소";

// querySelectorAll() 사용 예제
const elements = document.querySelectorAll(".my-class"); // 모든 요소 반환
elements.forEach((element, index) => {
    element.textContent = `querySelectorAll()로 선택한 요소 ${index}`;
});

마무리 및 권고사항

querySelector()와 querySelectorAll() 함수를 비교하고 그 차이점을 살펴보았습니다.
이 두 함수 선택에 있어서 주요 고려 사항은 다음과 같습니다.

단일 요소를 선택해야 할 때는 querySelector()를 사용하고, 여러 요소를 선택해야 할 때는 querySelectorAll()을 사용하세요.
대규모 DOM에서 작업할 때 querySelectorAll()이 더 효율적일 수 있습니다. 그러나 성능 차이는 미미할 수도 있으므로 실제 사용 사례에 따라 판단하세요.

마지막으로, 코드를 작성할 때 선택한 함수의 특성과 주의 사항을 고려하여 작업하세요. 필요한 경우 브라우저 콘솔을 활용하여 결과를 확인하고 디버깅하세요.