getElementsByClassName()

getElementsByClassName() 함수는
주어진 요소의 클래스 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.

HTML class 속성

반환되는 HTMLCollection 객체를 순회해서 각 요소에 대해 특정 작업을 수행할 수 있습니다.

HTMLCollection은
웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합입니다.
흔히 DOM 컬렉션이라 말하는 이 집합은 요소를 배열의 항목처럼 유사하게 다룰 수 있으며, 웹 페이지의 요소를 쉽게 조작할 수 있게 하는 객체입니다.

자바스크립트 HTMLCollection

HTMLCollection은 유사 배열 객체이면서, for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
그리고, DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다.
length 속성으로 유사 배열 객체인 HTMLCollection의 길이를 반환할 수 있습니다.

예제

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName()</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script src="class-name.js"></script>
    </body>
</html>
class-name.js 
const liElements = document.getElementsByClassName("a");
console.log(liElements); // HTMLCollection(3) [li.a, li.a, li.a]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_1 - forEach() 함수 적용 */
const arr = [...liElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_2 - forEach() 함수 적용 */
const liElementsArray = Array.from(liElements); // Array.from() 메서드로 배열 개체를 만듦
liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

getElementsByClassName() 함수가 반환하는 HTMLCollection은 배열이 아니기 때문에 forEach() 함수를 바로 사용할 수 없습니다. HTMLCollection은 배열과 유사하지만, 실제 배열이 아니므로 배열 메서드를 지원하지 않습니다. 하지만, Array.from() 또는 스프레드(...) 문법을 사용해 배열로 변환하면 forEach()를 사용할 수 있습니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.

코드 부연설명
for 문은 특정 횟수나 범위만큼 반복하는 문입니다.

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

구문

JavaScript 
// HTML 문서 전체에서
document.getElementsByClassName(names)

// 특정 요소 내에서
element.getElementsByClassName(names)

매개변수

getElementsByClassName() 함수의 매개변수
names 찾으려는 클래스 이름에 해당하는 모든 요소입니다. 이 값은 대소문자를 구분하는 문자열입니다.
여러 클래스 이름은 공백으로 구분됩니다.

반환 값

  • HTML 문서 내에서 주어진 클래스 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
  • 일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.

반환 값 예시

여러 클래스 이름은 공백으로 구분

여러 클래스 이름은 공백으로 구분해서 찾을 수 있습니다.
이때 여러 클래스 이름은 주어진 여러 클래그스의 이름을 모두 갖는 요소를 찾는다는 의미입니다.

다음은 클래스 이름 a와 b를 모두 갖는 요소를 찾는 예시입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName() - 여러 클래스 이름은 공백으로 구분</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a b c">라면</li>
            <li class="a b">떡볶이</li>
        </ul>
        <script src="test-1.js"></script>
    </body>
</html>
test-1.js 
const liElements = document.getElementsByClassName("a b");

for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "라면"
    "떡볶이"
*/
일치하는 요소의 n 번째 요소를 다루려면

일치하는 요소의 n 번째 요소를 다루려면 다음과 같이 할 수 있습니다.

JavaScript 
getElementsByClassName(name)[n]

getElementsByClassName() 함수는 유사 배열인 HTMLCollection 객체를 반환하는데, 배열처럼 인덱스로 접근할 수 있습니다.

다음은 HTML 문서 내의 a 클래스 이름을 가지는 첫 번째 요소를 다루는 예시입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName(name)[n]</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByClassName("a");

            /* HTML 문서 내의 a 클래스 이름을 가지는 첫 번째 요소 */
            console.log(liElements[0].textContent); // 0부터 시작하는 인덱스로 접근
            // 출력: "김밥"
        </script>
    </body>
</html>
일치하는 요소의 개수 확인하기

일치하는 요소의 개수는 length 속성으로 쉽게 확인할 수 있습니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName().length</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByClassName("a");
            console.log(liElements.length); // 3
        </script>
    </body>
</html>
특정 요소 내에서 요소 찾기

getElementById() 함수는 오직 document 객체에서만 사용하는 메서드이지만,
getElementsByTagName() 함수나 getElementsByClassName() 함수는 특정 요소 객체 내에서도 사용할 수 있는 메서드입니다.

다음은 id 속성의 값이 "cn-food"인 요소 내에서 a 클래스 이름을 가지고 있는 모든 요소를 찾는 예시입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>element.getElementsByClassName()</title>
    </head>
    <body>
        <h1>element.getElementsByClassName()</h1>
        <h2>분식점 메뉴</h2>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <h2>중국집 메뉴</h2>
        <div id="cn-food">
            <ul>
                <li class="a">짜장면</li>
                <li class="a">짬뽕</li>
                <li class="a">탕수육</li>
            </ul>
        </div>
        <script>
            const cnFood = document.getElementById("cn-food");

            // id가 "cn-food"인 요소 내에서 a 클래스 이름을 가지고 있는 모든 요소를 찾음
            const cnFoodLiElements = cnFood.getElementsByClassName("a");

            // 찾은 모든 요소 중에서 첫 번째 요소의 텍스트 콘텐트 출력
            console.log(cnFoodLiElements[0].textContent); // "짜장면"
        </script>
    </body>
</html>

명세서

getElementsByClassName() 함수의 명세서 사양
명세서 사양
document.getElementsByClassName() DOM Standard
#ref-for-dom-document-getelementsbyclassname①
element.getElementsByClassName() DOM Standard
#ref-for-dom-element-getelementsbyclassname

브라우저 호환성

getElementsByClassName() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
getElementsByClassName() 1 12 3 3.1

참고문헌

같이 보기