JavaScript getElementsByClassName (Deutsch)

Zusammenfassung: In diesem Lernprogramm erfahren Sie, wie Sie mit der Methode getElementsByClassName() Elemente nach Klassennamen auswählen.

Einführung in die Methode getElementsByClassName ()

Jedes HTML-Element verfügt über ein optionales Klassenattribut wie das folgende:

Code language: HTML, XML (xml)

Der Wert des Klassenattributs ist eine durch Leerzeichen getrennte Liste der Klassen des Elements. Bei den Klassen wird zwischen Groß- und Kleinschreibung unterschieden.

Mit den Klassen können Sie das CSS verwenden, um Elemente abzugleichen. Beispiel:

Code language: CSS (css)

In JavaScript verwenden Sie die Methode getElementsByClassName(), um Elemente basierend auf ihren Klassen auszuwählen.

Die Methode getElementsByClassName() ist für das Objekt document und jedes HTML-Element verfügbar.

Die Die Methode getElementsByClassName() akzeptiert ein einzelnes Argument, bei dem es sich um eine Zeichenfolge handelt, die einen oder mehrere Klassennamen enthält:

Code language: JavaScript (javascript)

In diesem Fall Syntax ist der Parameter classNames eine Zeichenfolge, die einen passenden Klassennamen darstellt. Beispiel:

Code language: JavaScript (javascript)

Wenn Sie Elemente nach mehreren Klassen abgleichen, müssen Sie Leerzeichen verwenden, um sie wie folgt zu trennen:

Code language: JavaScript (javascript)

Beachten Sie, dass Sie keine Klassenselektoren verwenden können, z. B. .btn oder .btn-primary für getElementsByClassName() -Methode.

Die getElementsByClassName() -Methode gibt eine HTMLCollection von Elementen zurück, die ist ein Array-ähnliches Objekt.

Wenn Sie die Methode getElementsByClassName() für das Objekt document aufrufen, sucht die Methode für Elemente mit den angegebenen Klassennamen im gesamten Dokument.

Wenn Sie jedoch die Methode getElementsByClassName() für ein bestimmtes Element aufrufen, werden nur übereinstimmende Elemente im Element zurückgegeben Teilbaum dieses Elements.

Beispiele für JavaScript getElementsByClassName ()

Nehmen wir einige Beispiele für die Verwendung der Methode getElementsByClassName().

Angenommen, Sie haben den folgenden HTML-Code:

1) Aufrufen von JavaScript getElementsByClassName () für ein Elementbeispiel

Das folgende Beispiel zeigt, wie mit der Methode getElementsByClassName() die Elemente, die die Nachkommen des <ul> -Elements sind:

Ausgabe:

Code language: JavaScript (javascript)

So funktioniert es:

• Wählen Sie zunächst das Element <ul> mit dem Klassennamen menu mit der Methode getElementById().
• Wählen Sie dann <li> Elemente aus, die die Nachkommen der <ul> -Element mit der Methode getElementsByClassName().
• Erstellen Sie abschließend ein Array mit dem Textinhalt von <li> -Elemente durch Ausleihen der map() -Methode des Array -Objekts.

2) Aufrufen von JavaScript getElementsByClassName () im Dokumentbeispiel

Um nach dem Element mit dem zu suchen Klasse heading-secondary verwenden Sie den folgenden Code:

Ausgabe:

Code language: JavaScript (javascript)

In diesem Beispiel Ruft die Methode getElementsByClassName() für das Objekt document auf und sucht daher nach Elementen mit der Klasse heading-secondary im gesamten Dokument.

In diesem Lernprogramm haben Sie gelernt, wie Sie mit der Methode getElementsByClassName() Elemente anhand eines oder mehrerer Klassennamen auswählen.