HTML 문서에서 같은 클래스를 가진 여러 요소를 한 번에 다뤄야 할 때는 document.getElementsByClassName() 메서드를 사용하는 것이 올바른 방법입니다. 이 메서드는 Document 인터페이스에 속해 있으며, 지정한 클래스 이름을 가진 모든 요소를 HTMLCollection 객체로 반환합니다.
반환된 HTMLCollection은 배열처럼 인덱스로 접근할 수 있기 때문에, 일반적인 for 반복문을 사용해 각 요소를 순서대로 처리할 수 있습니다. 아래 예제는 demo라는 클래스를 가진 div 요소들을 반복하면서 내부 내용을 콘솔에 출력하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="demo">My First JavaScript Program</div>
<div class="demo">This is the second Program</div>
<div class="demo">This is the third Program </div>
<script>
var className = document.getElementsByClassName('demo');
for(var index = 0; index < className.length; index++){
console.log(className[index].innerHTML);
}
</script>
</body>
</html>
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html"(index.html)로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
참고: 더 현대적인 반복 방법
최신 JavaScript에서는 Array.from()이나 스프레드 연산자(...)를 사용해 HTMLCollection을 배열로 변환한 후 forEach()나 for...of 문을 활용할 수도 있습니다. 또는 querySelectorAll()을 사용하면 처음부터 NodeList를 반환받아 forEach()를 바로 사용할 수 있어 코드가 더 간결해집니다.
const elements = document.querySelectorAll('.demo');
elements.forEach(el => console.log(el.innerHTML));