HTML DOM getElementsByClassName() 메서드는 주어진 클래스 이름을 가진 문서의 모든 요소 컬렉션을 가져오는 데 사용됩니다. 주어진 모든 요소를 NodeList 객체로 반환합니다. 인덱스 번호를 사용하여 반환된 개체의 모든 요소에 액세스할 수 있습니다. 이 메서드는 지정된 클래스 이름을 가진 하위 자식 요소를 갖도록 모든 개별 요소에 대해 호출할 수 있습니다.
구문
다음은 getElementsByClassName() 메서드의 구문입니다. -
document.getElementsByClassName(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> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면 -
위의 예에서 -
classname="PARA1"이 연결된 두 개의 단락을 만들었습니다.
<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() 메서드는 문서 객체에 대한 getElementsByClassName() 메서드를 사용하여 두
요소를 nodeListObject로 가져와 변수 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";
}