HTML DOM getElementsByClassName() 메서드 완벽 정리

HTML DOM의 getElementsByClassName() 메서드는 문서 내에서 지정된 클래스 이름을 가진 모든 요소의 컬렉션을 가져오는 데 사용됩니다. 이 메서드는 해당 요소들을 NodeList 객체 형태로 반환하며, 인덱스 번호를 사용해 반환된 객체 안의 어떤 요소에도 접근할 수 있습니다. 또한 이 메서드는 개별 요소에 대해서도 호출할 수 있으며, 이 경우 해당 요소의 하위 자식 요소 중에서 지정된 클래스 이름을 가진 요소들이 대상이 됩니다.

구문

getElementsByClassName() 메서드의 기본 구문은 다음과 같습니다.

document.getElementsByClassName(classname)

여기서 classname은 접근하려는 요소의 클래스 이름을 나타내는 문자열입니다. 클래스 이름을 공백으로 구분하면 여러 개의 클래스 이름을 동시에 검색할 수도 있습니다.

예제

getElementsByClassName() 메서드의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function changePara() {
        var p = document.getElementsByClassName("PARA1");
        p[0].innerHTML = "This text has been changed";
        p[1].style.color = "red";
        p[1].style.backgroundColor = "yellow";
    }
</script>
</head>
<body>
<h1>getElementsByClassName() example</h1>
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM getElementsByClassName() 메서드 완벽 정리

CHANGE 버튼을 클릭하면 다음과 같이 결과가 변경됩니다.

HTML DOM getElementsByClassName() 메서드 완벽 정리

예제 상세 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

먼저, 클래스 이름이 PARA1로 지정된 두 개의 문단(<p>) 요소를 생성했습니다.

<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

그다음, 사용자가 클릭하면 changePara() 함수를 실행하는 CHANGE 버튼을 만들었습니다.

<button onclick="changePara()">CHANGE</button>

changePara() 함수는 document 객체에 대해 getElementsByClassName() 메서드를 호출하여 두 개의 <p> 요소를 NodeList 객체로 가져온 뒤 변수 p에 할당합니다. 이후 인덱스 번호를 활용해 첫 번째 문단의 텍스트를 변경하고, 두 번째 문단에는 스타일을 적용합니다.

function changePara() {
    var p = document.getElementsByClassName("PARA1");
    p[0].innerHTML = "This text has been changed";
    p[1].style.color = "red";
    p[1].style.backgroundColor = "yellow";
}

이처럼 getElementsByClassName() 메서드를 활용하면 특정 클래스를 가진 여러 요소를 한 번에 선택하여 텍스트 변경, 스타일 적용 등 다양한 DOM 조작을 손쉽게 수행할 수 있습니다.