JavaScript querySelector 완벽 가이드 – CSS 선택자로 DOM 요소 손쉽게 다루기

자바스크립트를 배우다 보면 getElementById나 getElementsByClassName 같은 메서드를 접하게 됩니다. 두 메서드 모두 자바스크립트에서 특정 요소를 선택할 때 사용합니다.

요소를 한 번 선택하고 나면 그 요소의 내용을 변경하거나, 상태를 수정하거나, 심지어 화면에서 사라지게 만들 수도 있습니다.

그런데 자바스크립트에는 웹 페이지의 요소를 선택하는 또 다른 방법이 있습니다. 바로 querySelector입니다. 이 함수에는 querySelectorAll이라는 짝꿍 메서드도 있는데, 이 메서드는 특정 조건에 맞는 모든 요소를 반환합니다.

이 가이드에서는 querySelector와 querySelectorAll 메서드의 사용법을 살펴보고, 실제 동작 예제를 통해 여러분의 코드에 바로 적용할 수 있도록 안내하겠습니다.

querySelector란 무엇인가?

querySelector는 CSS 선택자 쿼리와 일치하는 요소를 반환하는 함수입니다. 주의할 점은 querySelector 메서드는 일치하는 요소 중 첫 번째 요소만 반환한다는 것입니다. 이 메서드를 사용할 때는 원하는 어떤 CSS 선택자든 지정할 수 있습니다. 예를 들어 특정 ID를 가진 요소를 가져오거나, 태그 이름으로 요소를 찾을 수 있습니다.

이 함수는 다음과 같이 사용합니다:

var elementName = document.querySelector('#thisElement');

CSS 선택자는 따옴표 안에 지정합니다. 또한 이 메서드를 사용하면 다른 요소 내부에 있는 요소를 선택할 수도 있습니다:

var parentElement = document.querySelector('main');
var childElement = document.querySelector('#childElement');

위 코드는 HTML 문서에서 <main> 태그 내부에 포함된, ID가 #childElement인 요소를 반환합니다.

querySelectorAll 메서드도 같은 방식으로 작동합니다. 차이점은 첫 번째 요소만 반환하는 것이 아니라, 쿼리 셀렉터와 일치하는 모든 요소를 반환한다는 점입니다:

var allParagraphs = document.querySelectorAll('p');

이 코드는 HTML 페이지에 있는 모든 <p> 태그의 목록을 반환합니다.

이 함수와 함께 사용할 수 있는 선택자의 몇 가지 예시는 다음과 같습니다:

p: 페이지의 모든 <p> 태그를 선택합니다.
#name_field: id가 "name_field"인 요소를 선택합니다.
.list: 클래스 이름이 "list"인 모든 요소를 선택합니다.
div > p: <div> 요소 내부에 있는 모든 <p> 요소를 선택합니다.

querySelector와 querySelectorAll 메서드에서는 여러 개의 선택자를 조합해 사용할 수도 있습니다. CSS 선택자에 대해 더 알고 싶다면 CSS 및 HTML 속성 선택자 관련 가이드를 참고하세요.

참고로, 일치하는 요소를 찾지 못하면 null이 반환됩니다.

querySelector 활용하기

querySelector 메서드가 실제로 어떻게 작동하는지 간단한 웹 애플리케이션을 만들어 확인해 보겠습니다. HTML에 관한 정보를 보여주는 웹 페이지를 만들고, querySelector를 사용해 클릭하면 "다크 모드"가 활성화되는 버튼을 추가할 것입니다.

1. 프론트엔드 설정하기

먼저 페이지의 프론트엔드부터 준비하겠습니다:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Facts!</title>
		<link rel="stylesheet" href="./facts.css">
	</head>

	<body>
		<div class="mainBox">
			<h1 class="text">HTML Facts!</h1>
			<p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p>
			<button type="button">Enable dark mode</button>
		</div>
		<script src="./facts.js"></script>
	</body>
</html>

HTML에 관한 재미있는 사실 하나를 보여주는 간단한 웹페이지를 만들었습니다. 현재 페이지는 다음과 같이 보입니다:

JavaScript querySelector 완벽 가이드 – CSS 선택자로 DOM 요소 손쉽게 다루기

페이지가 HTML 팁은 보여주고 있지만, 아직 두 가지 핵심 요소가 빠져 있습니다. 바로 스타일과 작동하는 다크 모드 버튼입니다. facts.css라는 파일에 다음 스타일을 추가해 보겠습니다:

.mainBox {
    margin: auto;
    width: 50%;
    text-align: center;
    background: hotpink;
    padding: 5%;
}

body {
    background: lightblue;
}

button {
    padding: 10px;
    background: lightgreen;
    border-radius: 10px;
    border: none;
}

이 스타일 덕분에 사이트가 한결 보기 좋아졌습니다:

프론트엔드 작업은 여기까지만 하면 됩니다. 이제 자바스크립트로 다크 모드를 추가하는 데 집중해 보겠습니다.

2. 자바스크립트로 다크 모드 추가하기

다크 모드 기능에는 두 가지 동작이 필요합니다:

박스 안의 제목(h1)과 문단(p) 텍스트를 흰색으로 변경합니다.
사이트의 파란색 배경을 검은색으로 변경합니다.

타깃으로 삼을 DOM 요소(웹페이지 요소), 즉 제목, 문단, 그리고 페이지 본문(body)을 먼저 선택하겠습니다. facts.js라는 파일에 다음과 같이 작성합니다:

const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const body = document.querySelector("body");

이 코드는 문서에서 각각 <h1>, <p>, <body> 태그에 해당하는 첫 번째 요소를 반환합니다. 이제 텍스트와 body 태그의 색상을 변경하는 함수를 만들어 보겠습니다. 제목과 문단 텍스트는 흰색으로, 사이트 배경은 검은색으로 바꿀 겁니다.

function enableDarkMode() {
	heading.setAttribute("style", "color: white;");
	paragraph.setAttribute("style", "color: white;");
	body.setAttribute("style", "background-color: black;");
}

거의 다 왔습니다. 다음 단계는 이벤트 리스너를 설정하는 것입니다. 이 리스너는 사용자가 버튼을 클릭하는 순간을 감지하며, 버튼이 클릭되면 다크 모드가 활성화됩니다:

document.querySelector("button").addEventListener("click", enableDarkMode);

이제 버튼을 클릭하면 어떻게 되는지 직접 확인해 볼까요:

사이트가 성공적으로 다크 모드로 전환되었습니다!

마무리 (그리고 도전 과제)

눈치채셨나요? 현재 우리 코드는 사용자가 다크 모드를 켜는 것만 가능합니다. 여기서 도전 과제 하나 드리겠습니다: 사이트에서 다크 모드를 끄는 코드를 직접 작성해 보세요.

정리하면, querySelector 메서드를 사용하면 CSS 선택자 쿼리를 기반으로 HTML 요소를 선택할 수 있습니다. 이 메서드는 일치하는 첫 번째 요소를 반환하며, querySelectorAll 메서드를 사용하면 지정된 선택자와 일치하는 모든 요소의 목록을 가져올 수 있습니다.

이제 여러분도 자바스크립트 전문가처럼 querySelector 메서드를 자유롭게 사용할 준비가 되었습니다!