Notice
Recent Posts
Recent Comments
Link
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags more
Archives
Today
Total
관리 메뉴

데브마우스

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

JavaScript/JS: 문법 정리

[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에 담겨져 있는걸로 나옵니다.

'JavaScript > JS: 문법 정리' 카테고리의 다른 글

[JavaScript]자바스크립트를 활용하여 HTML 요소와 CSS의 속성 및 속성 값 생성, 변경 또는 삭제 방법  (0) 2023.12.16
[JavaScript] 상대위치 요소 선택 정리  (0) 2023.12.16
[JavaScript] Number 객체와 메서드 정리  (0) 2023.12.14
[JavaScript]자바스크립트 사용자 정의 함수와 내장 함수 정리  (0) 2023.12.13
[JavaScript]자바스크립트 변수와 상수 선언 방법 그리고 데이터 타입  (0) 2023.12.12
'JavaScript/JS: 문법 정리' Related Articles more