querySelectorAll 반복문 사용 방법
이번 포스팅은 JavaScript에서 HTML 요소를 가져오는 querySelectorAll() 메서드의 반환 결과에 반복문을 사용하는 방법을 소개합니다.
아래는 네 개의 div 태그를 가지는 HTML 마크업입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
<script src="src/index.js"></script>
</body>
</html>아래는 querySelector() 메서드로 div 태그를 가져오는 JavaScript 코드입니다.
const content = document.querySelectorAll("div");querySelectorAll() 메서드는 NodeList 객체를 반환하며, NodeList 객체에 반복문을 사용할 수 있는 방법을 알아봅시다.
방법 1. for 문
가장 기본적인 방법인 for 문을 사용하여 NodeList 객체에 반복문을 사용할 수 있습니다. NodeList의 요소를 인덱스로 접근하여 HTML 요소를 출력합니다.
for 문의 장점은 모든 브라우저에서도 동작한다는 것입니다.
const content = document.querySelectorAll("div");
for (var index = 0; index < content.length; index++) {
console.log(content[index]);
}[실행 결과]
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>방법 2. for...of 문
for 문의 확장된 형태인 for...of 문을 NodeList에 사용할 수 있습니다. for...of 문의 장점은 for 문보다 코드가 간결하다는 것이고 단점은 모든 브라우저에서 지원하지 않는다는 것입니다.
IE11 이하인 구형 브라우저에서는 실행되지 않을 수 있으므로 구형 브라우저에서 for...of 문을 사용하려면 Bable과 같은 컴파일러가 필요합니다.
const content = document.querySelectorAll("div");
for (var element of content) {
console.log(element);
}[실행 결과]
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>방법 3. forEach() 메서드
배열의 forEach() 메서드와 마찬가지로 NodeList 객체에는 자체 forEach() 메서드가 존재합니다.
for...of 문과 마찬가지로 forEach() 메서드는 모든 브라우저에서 지원하지 않으므로 구형 브라우저에서 사용하려면 컴파일러가 필요합니다.
const content = document.querySelectorAll("div");
content.forEach((element) => {
console.log(element);
});[실행 결과]
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>방법 4. spread 연산자와 forEach() 메서드
NodeList 객체는 순수한 배열이 아닙니다. NodeList 객체를 순수한 배열로 변경하고 배열에서 제공하는 forEach() 메서드를 사용하고 싶다면, spread 연산자를 사용하여 NodeList 객체를 배열로 변경하고 forEach() 메서드를 사용합니다.
spread 연산자는 ES2015부터 제공하므로 구형 브라우저에서 동작하지 않을 수 있습니다. 구형 브라우저에서 spread 연산자를 사용하려면 컴파일러가 필요합니다.
const content = document.querySelectorAll("div");
[...content].forEach((element) => {
console.log(element);
});[실행 결과]
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>'JavaScript > DOM' 카테고리의 다른 글
| [JavaScript]형제 노드 가져오는 방법 (0) | 2022.11.15 |
|---|---|
| [JavaScript]부모, 자식 노드 가져오는 방법 (0) | 2022.11.15 |
| [JavaScript]HTML 요소 가져오는 방법 (1) | 2022.11.13 |
| [JavaScript]HTML 요소의 넓이와 높이 가져오는 방법 (0) | 2022.11.13 |
| [JavaScript]JavaScript에서 배경색 변경하는 방법 (0) | 2022.11.11 |
댓글