▶ querySelector 정리
▶ 이 명령어가 뭐하는 건지
querySelector는 HTML 문서에서 가장 처음 발견되는 요소 하나를 선택하는 JavaScript 메서드임.
👉 CSS 선택자 방식으로 요소를 정확히 지정해서 가져올 수 있음.
(예: id, class, 태그, 자식, 속성, 등등)
▶ 명령어 문법
document.querySelector(선택자);
- document는 웹페이지 전체를 뜻함.
- querySelector() 안에는 CSS 선택자처럼 쓸 수 있는 문자열을 넣음.
▷ 예시 문법 :
document.querySelector("#title"); // id가 title인 요소
document.querySelector(".btn"); // class가 btn인 첫 번째 요소
document.querySelector("p"); // 첫 번째 <p> 태그
document.querySelector("ul li.active") // ul 안에 있는 .active 클래스 li
▶ 파라미터에 어떤 게 들어갈 수 있는지?
CSS 선택자 형식의 문자열만 들어갈 수 있음.
▶ 주로 어떻게 쓰는지
- 웹 페이지에서 특정 요소를 선택해서 조작할 때 사용돼요.
- 주로 이벤트 처리, 스타일 변경, 값 가져오기 등에 사용됩니다.
✔ 자주 쓰이는 상황:
- 버튼 클릭 시 동작
- input에 입력된 값 읽기
- 특정 요소의 class를 바꾸거나 숨기기 등
▶ 예시
✅ 버튼 클릭 시 배경색 변경
<button class="btn">눌러봐</button>
<script>
const button = document.querySelector(".btn");
button.addEventListener("click", () => {
button.style.backgroundColor = "lightblue";
});
</script>
✅ 입력값 읽기
<input type="text" id="username" placeholder="이름을 입력하세요">
<button id="submitBtn">확인</button>
<script>
const input = document.querySelector("#username");
const button = document.querySelector("#submitBtn");
button.addEventListener("click", () => {
alert("입력한 이름: " + input.value);
});
</script>
✅ 요약 정리
- querySelector는 "첫 번째 요소" 하나만 선택.
- 여러 개를 선택하고 싶다면 → querySelectorAll()을 사용.
▶ JavaScript 요소 선택 메서드 비교
✅ 예시 코드로 이해하기
🔹 1. querySelector
const el = document.querySelector(".title");
// class="title" 중 첫 번째만 선택
🔹 2. querySelectorAll
const items = document.querySelectorAll(".menu-item");
items.forEach(item => {
item.style.color = "red";
});
🔹 3. getElementById
const box = document.getElementById("myBox");
// id="myBox"인 요소를 가져옴
🔹 4. getElementsByClassName
const buttons = document.getElementsByClassName("btn");
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
✅ 어떤 걸 언제 써야 할까?
✅ 요약 그림처럼 외우기
🟢 querySelector → 하나만, CSS 선택자 가능
🟢 querySelectorAll → 여러 개, CSS 선택자 가능
🟡 getElementById → id만, 하나만, 가장 빠름
🟡 getElementsByClassName → 클래스명으로 여러 개, 실시간 반영
querySelector, querySelectorAll, getElementById, getElementsByClassName를 직접 실습해볼 수 있는 HTML 예제 파일
각 메서드별로 버튼을 눌러서 어떤 요소가 선택되고, 어떤 변화가 일어나는지 확인할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 선택자 실습 예제</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 id="main-title">안녕하세요!</h1>
<p class="desc">이건 설명입니다.</p>
<p class="desc">또 다른 설명입니다.</p>
<ul>
<li class="menu-item">메뉴 1</li>
<li class="menu-item">메뉴 2</li>
<li class="menu-item">메뉴 3</li>
</ul>
<button id="btn-id">getElementById</button>
<button id="btn-class">getElementsByClassName</button>
<button id="btn-q">querySelector</button>
<button id="btn-qa">querySelectorAll</button>
<script>
// 1. getElementById
document.getElementById("btn-id").addEventListener("click", () => {
const title = document.getElementById("main-title");
title.style.color = "blue";
alert("getElementById로 h1 선택!");
});
// 2. getElementsByClassName
document.getElementById("btn-class").addEventListener("click", () => {
const descs = document.getElementsByClassName("desc");
for (let i = 0; i < descs.length; i++) {
descs[i].style.fontWeight = "bold";
}
alert("getElementsByClassName로 p 선택!");
});
// 3. querySelector
document.getElementById("btn-q").addEventListener("click", () => {
const firstItem = document.querySelector(".menu-item");
firstItem.classList.add("highlight");
alert("querySelector로 첫 번째 메뉴에 하이라이트!");
});
// 4. querySelectorAll
document.getElementById("btn-qa").addEventListener("click", () => {
const allItems = document.querySelectorAll(".menu-item");
allItems.forEach(item => {
item.style.backgroundColor = "lightgreen";
});
alert("querySelectorAll로 모든 메뉴에 배경색 적용!");
});
</script>
</body>
</html>
✅ 이 예제에서 해볼 수 있는 것
- 버튼을 클릭하면서 각각의 선택자들이 어떻게 작동하는지 직접 확인할 수 있음.
- alert()으로 선택되었다는 걸 시각적으로도 확인할 수 있음.
- 각 요소에 스타일이 적용되며 결과가 바로 보임.
'국비지원 - 실버마케팅(코딩) 250206~' 카테고리의 다른 글
| "버튼 클릭하면 스타일 바뀌게 하고 싶다면? classList.add & remove 배우기" (2) | 2025.05.08 |
|---|---|
| "HTML 요소들을 한 번에 불러오자! 자바스크립트 getElementsByClassName 사용법" (0) | 2025.05.08 |
| "한 개만 고를까? 여러 개 고를까? radio & checkbox 완전 정리" (5) | 2025.05.08 |
| "파일끼리 어떻게 연결하지? 자바스크립트 import / export 쉽게 배우기" (0) | 2025.05.08 |
| 0317 경로이슈 (3) (0) | 2025.04.15 |