[JavaScript] querySelector() vs querySelectorAll() 뭐가 다를까요?

데브마우스 2023. 12. 16. 22:13

자바스크립트에는 CSS 선택자로 요소를 선택할 수 있는 querySelector와 querySelectorAll이 있습니다.

이 둘을 제일 간단하게 설명하자면 하나만 고르는 것(querySelector())과 모두 다 고르는것(querySelectorAll())이라고 할 수 있습니다.

디테일 하게 들어가면 다릅니다.

querySelector() vs querySelectorAll()

querySelector() vs querySelectorAll()
특성	querySelector()	querySelectorAll()
반환값	단일 요소	NodeList
반환 타입	DOM 요소	NodeList (배열과 유사하지만 배열은 아님)
일치하는 요소의 반환 방법	첫 번째 일치하는 요소만 반환	모든 일치하는 요소를 NodeList로 반환
결과가 없을 때 반환값	null	빈 NodeList

querySelector()로 여러개 있는 요소를 선택하면 어떻게 될까요?

var active = document.querySelector(".active");

var activeAll = document.querySelectorAll(".active");

active라는 클래스를 여러개 가지고 있는 HTML 파일에서, 웹 브라우저의 개발자 도구로 [Console]탭에서 위와 같이 입력하였습니다.

activeAll 변수를 확인해보니 5개의 active 클래스를 가진 요소를 확인하실 수 있습니다.

querySelector()로 여러개 있는 요소를 선택하실 경우 제일 첫 요소만 선택되는걸 확인하실 수 있습니다.

querySelectorAll()로 하나만 있는 요소를 선택한다면 어떻게 될까요?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        제일 바깥 div입니다.
        <div class="box">
            중간 div입니다.
            <div class="box inside">
                제일 안쪽 div입니다.
            </div>
        </div>
    </div>
    <script src="app.js">
        var inside = document.querySelectorAll(".inside");
    </script>
</body>
</html>

위 코드에서 box 속성 값을 가진 클래스는 3개 있지만 inside 속성 값을 가진 클래스는 1개뿐 입니다.

웹 브라우저의 개발자 도구로 [Console]탭에서 변수 inside를 확인해보았습니다.

inside 속성 값을 가지는건 1개뿐이지만 querySelecotrAll()로 담았기 때문에 NodeList에 담겨져 있는걸로 나옵니다.