Dokument HTML DOM getElementsByClassName()
Przykład
Pobierz wszystkie elementy z class="przykład":
const collection = document.getElementsByClassName("example");
Pobierz wszystkie elementy z klasami "example" i "color":
const collection = document.getElementsByClassName("example color");
Więcej przykładów poniżej.
Definicja i użycie
Metoda getElementsByClassName()zwraca kolekcję elementów z określonymi nazwami klas.
Metoda getElementsByClassName()zwraca HTMLCollection .
Właściwość getElementsByClassName()jest tylko do odczytu.
Kolekcja HTML
HTMLCollection to kolekcja węzłów HTML.
Dostęp do węzłów w kolekcji można uzyskać za pomocą numerów indeksu. Indeks zaczyna się od 0.
Właściwość length zwraca liczbę elementów w kolekcji.
Zobacz też:
Metoda dokumentu getElementById()
Metoda dokumentu getElementsByTagName()
Składnia
document.getElementsByClassName(classname)
Parametry
| Parameter | Description |
| classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Wartość zwrotu
| Rodzaj | Opis |
| Obiekt. | Obiekt HTMLCollection . Kolekcja elementów o określonej nazwie klasy. Elementy są sortowane tak, jak pojawiają się w dokumencie. |
Więcej przykładów
Liczba elementów z class="przykład":
let numb = document.getElementsByClassName("example").length;
Zmień kolor tła wszystkich elementów za pomocą class="przykład":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
Powiązane strony
Samouczek CSS: składnia CSS
Dokumentacja CSS: selektor CSS .class
Dokumentacja HTML DOM: element .getElementsByClassName()
Dokumentacja HTML DOM: właściwość className
Dokumentacja HTML DOM: właściwość classList
Dokumentacja HTML DOM: Obiekt stylu
Obsługa przeglądarki
document.getElementsByClassName()jest funkcją DOM Level 1 (1998).
Jest w pełni obsługiwany we wszystkich przeglądarkach:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |