GetElementsByClassName()은 대상 클래스 이름이 설정된 모든 HTML 요소를 가져올 수 있는 메서드입니다. 이 기사에서는 GetElementsByClassName() 메서드의 구체적인 사용법을 소개합니다.
권장 매뉴얼:
1.HTML5 최신 버전 참조 매뉴얼
2.JavaScript 중국어 참조 매뉴얼
예를 들어 HTML 요소의 클래스 이름은 다음과 같습니다
<h1 class="sample">标题</h1> <p class="test">文本</p> <a class="test" href="#">链接</a>
여러 개가 있습니다. HTML 요소 함수에 동일한 클래스 이름이 할당되었습니다.
그래서 일반적으로 하나의 HTML 파일에는 동일한 클래스 이름이 많이 있으며, getElementsByClassName()을 사용하면 임의의 클래스 이름을 사용하여 모든 HTML 요소를 추출할 수 있습니다.
getElementsByClassName() 사용법
기본 구문을 먼저 살펴보겠습니다
대상 범위에 추출할 클래스 이름을 문자열로 지정하여 사용합니다.
doccument.getElementsByClassName( 类名 );
대상 범위를 문서로 설정하여 HTML 요소 전체를 지정할 수 있습니다.
물론 임의의 범위를 설정할 수도 있습니다. (자세한 내용은 나중에 설명하겠습니다)
또한 반환 값은 배열과 매우 유사한 HTML 컬렉션이라는 점에 유의하세요.
임의의 클래스 이름을 가진 모든 요소를 가져오는 방법
먼저 다음 HTML이 있다고 가정합니다.
<h1 class="sample">标题1</h1> <p class="test">文本1</p> <h2 class="sample">标题2</h2> <p class="test">文本2</p>
클래스 이름은 샘플과 테스트 두 개가 있습니다
예를 들어 클래스 이름이 "test"인 모든 HTML 요소를 가져오려면 다음과 같이 작성할 수 있습니다.
var result = document.getElementsByClassName('test'); console.log(result[0]); console.log(result[1]);
실행 결과
<p class="test">文本1</p> <p class="test">文本2</p>
"test"가 매개변수에 문자열로 지정되면 클래스 이름이 포함된 모든 HTML 요소의 모음을 얻을 수 있습니다.
이후 첨자와 같은 배열 출력을 사용하면 실행 결과 등 HTML 요소를 얻을 수 있습니다.
여러 클래스를 지정하는 방법
예를 들어 다음 HTML은
<h1 class="sample test">标题1</h1> <p class="test">文本1</p> <h2 class="sample test">标题2</h2> <p class="test">文本2</p>
이 예에서 h1과 h2 요소에는 2개의 클래스 이름이 지정됩니다.
이 경우에도 매개변수로 전달할 수 있습니다. 모든 수업을 들어보세요.
var result = document.getElementsByClassName('sample test'); console.log(result[0]); console.log(result[1]);结果 실행 결과
<h1 class="sample test">标题1</h1> <h2 class="sample test">标题2</h2>EELEMELEMELEMELEMEELEMENTSBYClassName() 사용
Document 이외의 루트 요소를 지정하는 방법 다음 HTML 요소를 살펴보겠습니다.
R
<h1 class="sample test">标题1</h1> <p class="test">文本1</p> <div id="wrap"> <h2 class="sample test">标题2</h2> <p class="test">文本2</p> </div>E div 요소를 사용하여 계층 구조를 형성합니다. 예를 들어 이렇게 설명하면 id 속성 값의 래퍼 내의 HTML 요소만 개체로 사용할 수 있습니다.
요소 범위 검색 클래스 방식을 지정합니다.
위와 같이 div 요소의 범위를 설정했다면 다음과 같이 작성합니다.var div = document.getElementById('wrap'); var result = div.getElementsByClassName('test sample'); console.log(result[0]);실행 결과
<h2 class="sample test">标题2</h2>먼저 div 요소를 가져올 getElementById()를 준비합니다. 이후, 획득한 div 요소를 객체로 하여 getElementsByClassName()을 실행합니다. 실행 결과에 따르면 div 요소 내에서 h2 요소만 가져옵니다.
추천 사진 기사: 1.
getElementsByClassName()을 어떻게 사용하나요? getElementsByClassName() 인스턴스 사용량 요약
관련 동영상 추천: 1.
Dugu Jiujian(1)_HTML5 비디오 튜토리얼 2.
JavaScript_옥소녀심경 시리즈로 빠르게 시작해보세요
위 내용은 getElementsByClassName()을 사용하여 클래스 이름에서 여러 HTML 요소를 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!