getElementsByClassName()을 사용하여 클래스 이름에서 여러 HTML 요소를 가져오는 방법

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!