So erhalten Sie mit getElementsByClassName() mehrere HTML-Elemente aus dem Klassennamen

GetElementsByClassName() ist eine Methode, die alle HTML-Elemente abrufen kann, für die der Zielklassenname festgelegt ist. In diesem Artikel wird Ihnen die spezifische Verwendung der Methode GetElementsByClassName() vorgestellt.

Empfohlenes Handbuch :
1.HTML5-Referenzhandbuch für die neueste Version
2.JavaScript Chinesisch Referenzhandbuch

Zum Beispiel lautet der Klassenname eines HTML-Elements wie folgt

<h1 class="sample">标题</h1>
<p class="test">文本</p>
<a class="test" href="#">链接</a>

Es hat die Funktion, mehreren HTML-Elementen denselben Klassennamen zu geben.

Normalerweise gibt es also viele gleiche Klassennamen in einer HTML-Datei. Mit getElementsByClassName() können wir alle HTML-Elemente mit beliebigen Klassennamen extrahieren.

So verwenden Sie getElementsByClassName()

Werfen wir zunächst einen Blick auf die grundlegende Syntax

Geben Sie den Klassennamen an, der in den Zielbereich extrahiert werden soll indem Sie eine zu verwendende Zeichenfolge verwenden.

doccument.getElementsByClassName( 类名 );

Es ist möglich, ein gesamtes HTML-Element anzugeben, indem der Zielbereich auf „Dokument“ festgelegt wird.

Natürlich können Sie auch einen beliebigen Bereich einstellen. (Details werden später beschrieben)

Beachten Sie außerdem, dass der Rückgabewert eine HTML-Sammlung ist, die einem Array sehr ähnlich ist.

Methode zum Abrufen aller Elemente mit einem beliebigen Klassennamen

Nehmen Sie zunächst an, dass Sie über den folgenden HTML-Code verfügen.

<h1 class="sample">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample">标题2</h2>
<p class="test">文本2</p>

hat zwei Klassennamen, „sample“ und „test“.

Um beispielsweise alle HTML-Elemente mit dem Klassennamen „test“ abzurufen, können Sie ihn wie folgt schreiben.

var result = document.getElementsByClassName('test');
console.log(result[0]);
console.log(result[1]);

Ausführungsergebnisse

<p class="test">文本1</p>
<p class="test">文本2</p>

Wenn „test“ als String im Parameter angegeben wird, können Sie eine Sammlung aller HTML-Elemente erhalten, die den Klassennamen enthalten. Wenn Sie nach

eine Array-Ausgabe wie einen Index verwenden, können Sie HTML-Elemente wie Ausführungsergebnisse abrufen.

Methoden zum Angeben mehrerer Klassen

Zum Beispiel das folgende HTML

<h1 class="sample test">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample test">标题2</h2>
<p class="test">文本2</p>

In diesem Beispiel erhalten die Elemente h1 und h2 den Namen 2 Klassen

Auch in diesem Fall können Sie alle Klassen erhalten, indem Sie den Parametern mehrere Klassennamen zuweisen.

var result = document.getElementsByClassName('sample test');
console.log(result[0]);
console.log(result[1]);

Ausführungsergebnisse

<h1 class="sample test">标题1</h1>
<h2 class="sample test">标题2</h2>

Verwendung von GetElementsByClassName()                                                                                                                                                                           

<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>

In diesem Beispiel wird ein div-Element verwendet bilden eine hierarchische Struktur.

Durch diese Beschreibung können beispielsweise nur die HTML-Elemente innerhalb des ID-Attributwertumbruchs als Objekte verwendet werden.

Methoden zum Angeben von Suchklassen für Elementbereiche

Wenn Sie den Bereich eines div-Elements wie oben festlegen, schreiben Sie ihn wie folgt.

var div = document.getElementById('wrap');
var result = div.getElementsByClassName('test sample');
console.log(result[0]);

Ausführungsergebnisse

<h2 class="sample test">标题2</h2>

Bereiten Sie zunächst getElementById() vor, um das div-Element abzurufen.

Führen Sie danach getElementsByClassName() mit dem erhaltenen div-Element als Objekt aus.

Den Ausführungsergebnissen nach zu urteilen, wird nur das h2-Element innerhalb des div-Elements erhalten.

Empfohlene Fotoartikel

: ​                                                                                                                                              >Wie verwende ich getElementsByClassName()? Zusammenfassung der getElementsByClassName()-Instanznutzung

Ähnliche Videoempfehlungen: ​
1.Dugu Jiujian (1)_HTML5-Video-Tutorial ​
2. Erste Schritte mit JavaScript

Das obige ist der detaillierte Inhalt vonSo erhalten Sie mit getElementsByClassName() mehrere HTML-Elemente aus dem Klassennamen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!