getElementsByClassName() 메소드는 클래스 이름 값을 통해 요소를 선택하거나 가져오는 데 사용됩니다. 이 DOM 메소드는 지정된 클래스 이름을 가진 모든 요소로 구성된 배열과 같은 객체를 반환합니다. 특정 요소에 대해 getElementsByClassName() 메서드를 호출하면 전체 문서를 검색하고 지정된 클래스 이름과 일치하는 요소만 반환합니다.
통사론
var ele=document.getELementsByClassName('name');
여기서 name은 전달해야 하는 필수 인수입니다. 일치시킬 단일 클래스 이름이나 여러 클래스 이름을 지정하는 문자열입니다.
getElementsByClassName() 메서드의 예
메소드의 실제 구현을 알고 이해하기 위해 몇 가지 예를 살펴보겠습니다.
예
이는 변수 x를 호출할 때 배열과 유사한 객체를 반환하는 간단한 클래스 구현입니다.
<h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName('Class'); document.write('On calling x, it will return an arrsy-like object: <br>'+x);
산출:
마찬가지로, 여러 클래스에 대한 요소 컬렉션을 반환하기 위해 getElementsByClassName() 메서드를 구현할 수 있습니다.
getElementsByClassName(), querySelector() 및 querySelectorAll() 메소드의 차이점
getElementsByClassName(): 지정된 클래스 이름을 가진 요소와 일치하고 일치된 요소 집합을 반환합니다. 반환된 요소는 요소의 라이브 HTML 컬렉션입니다. 문서 개체 모델이 변경되면 이러한 라이브 요소가 추가로 업데이트될 수 있습니다.
쿼리선택기(): 지정된 클래스 이름과 일치하는 단일 요소만 반환합니다. 일치하는 요소를 찾지 못하면 null을 반환합니다.
이해해야 할 주요 요점은 위에 설명된 모든 메서드가 하나의 요소 또는 목록을 반환하지만 getELementsByClassName() 메서드는 동적 업데이트하고 나머지 두 가지 방법은 공전 .