반응형
바스크립트에서 요소(element) 선택은 HTML 문서 안의 특정 태그를 가져와서 조작할 수 있게 해 주는 중요한 기능입니다.
예제를 통해서 알아보겠습니다.
- getElementById("id") → 하나만 선택
- getElementsByClassName("class") → 여러 개 (HTMLCollection)
- getElementsByTagName("tag") → 여러 개 (HTMLCollection)
- querySelector("선택자") → 첫 번째만
- querySelectorAll("선택자") → 모든 요소 (NodeList)
1. getElementById()
- id 속성으로 요소를 선택
<!DOCTYPE html>
<html>
<head>
<title>getElementById 예제</title>
</head>
<body>
<h1 id="title">안녕하세요</h1>
<button onclick="changeText()">제목 바꾸기</button>
<script>
function changeText() {
let element = document.getElementById("title"); // id로 선택
element.innerText = "반갑습니다!";
}
</script>
</body>
</html>
2. getElementsByClassName()
- 같은 class 속성을 가진 여러 요소 선택 (배열 형태 반환)
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName 예제</title>
</head>
<body>
<p class="text">첫 번째 문장</p>
<p class="text">두 번째 문장</p>
<button onclick="changeColor()">색 바꾸기</button>
<script>
function changeColor() {
let elements = document.getElementsByClassName("text");
for (let i = 0; i < elements.length; i++) {
elements[i].style.color = "red"; // 글씨 색 빨간색으로
}
}
</script>
</body>
</html>
3. getElementsByTagName()
- 특정 태그 이름으로 요소 선택
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName 예제</title>
</head>
<body>
<h2>첫 번째 제목</h2>
<h2>두 번째 제목</h2>
<button onclick="highlight()">배경색 바꾸기</button>
<script>
function highlight() {
let headers = document.getElementsByTagName("h2");
for (let i = 0; i < headers.length; i++) {
headers[i].style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>
4. querySelector() / querySelectorAll()
- CSS 선택자 문법을 사용하여 요소 선택
- querySelector() → 첫 번째 요소만 선택
- querySelectorAll() → 모든 요소 선택 (NodeList 반환)
<!DOCTYPE html>
<html>
<head>
<title>querySelector 예제</title>
</head>
<body>
<p class="info">첫 번째</p>
<p class="info">두 번째</p>
<button onclick="update()">변경하기</button>
<script>
function update() {
let first = document.querySelector(".info"); // 첫 번째 .info 선택
first.style.fontWeight = "bold";
let all = document.querySelectorAll(".info"); // 모든 .info 선택
all.forEach(el => el.style.color = "blue");
}
</script>
</body>
</html>
5. 위에서 설명한 여러 가지 요소 선택 방법을 한 페이지에서 비교할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 요소 선택 비교</title>
<style>
.highlight { background-color: yellow; }
.red { color: red; }
.blue { color: blue; }
</style>
</head>
<body>
<h1 id="title">제목 (id 선택)</h1>
<p class="text">첫 번째 문단 (class 선택)</p>
<p class="text">두 번째 문단 (class 선택)</p>
<h2>소제목 1 (태그 선택)</h2>
<h2>소제목 2 (태그 선택)</h2>
<p class="info">정보 A (querySelector)</p>
<p class="info">정보 B (querySelectorAll)</p>
<hr>
<button onclick="useId()">getElementById</button>
<button onclick="useClass()">getElementsByClassName</button>
<button onclick="useTag()">getElementsByTagName</button>
<button onclick="useQuery()">querySelector / querySelectorAll</button>
<script>
// 1. id 선택
function useId() {
let el = document.getElementById("title");
el.innerText = "제목이 변경되었습니다!";
el.classList.add("highlight");
}
// 2. class 선택
function useClass() {
let items = document.getElementsByClassName("text");
for (let i = 0; i < items.length; i++) {
items[i].classList.add("red");
}
}
// 3. 태그 선택
function useTag() {
let headers = document.getElementsByTagName("h2");
for (let i = 0; i < headers.length; i++) {
headers[i].classList.add("highlight");
}
}
// 4. querySelector / querySelectorAll
function useQuery() {
let first = document.querySelector(".info"); // 첫 번째 .info
first.style.fontWeight = "bold";
let all = document.querySelectorAll(".info");
all.forEach(el => el.classList.add("blue"));
}
</script>
</body>
</html>여러 가지 요소 선택 방법을 한 페이지에서 비교할 수 있는 예제를 만들어 드릴게요.
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| 자바스크립트: onclick 이벤트, 버튼을 클릭할 때마다 문자열과 배경 변경하기 (6) | 2025.08.19 |
|---|---|
| 자바스크립트: 이벤트 속성 종류 (1) | 2025.08.19 |
| 자바스크립트: 로그인 페이지 만들기 (4) | 2025.08.17 |
| Javascript: 반복문 for while do of in break continue (3) | 2025.08.16 |
| Javascript: 조건문 if (4) | 2025.08.15 |