Metoda getElementsByClassName() obiektu HTML DOM Document

Definicja i użycie

getElementsByClassName() Metoda zwraca zbiór elementów o określonej klasie.

getElementsByClassName() Metoda zwraca HTMLCollection.

getElementsByClassName() Właściwości są jedynie do odczytu.

HTMLCollection

HTMLCollection Jest to zbiorowisko elementów HTML podobne do tablicy (listy).

Elementy w zbiorze można uzyskać za pomocą indeksu (zaczynając od 0).

length Właściwość zwraca liczbę elementów w zbiorze.

Zobacz również:

Metoda getElementById()

Metoda getElementsByTagName()

Metoda querySelector()

Metoda querySelectorAll()

Obiekt HTMLCollection

Przykład

Przykład 1

Pobieranie wszystkich elementów z klasą "example":

const collection = document.getElementsByClassName("example");

Spróbuj sam

Przykład 2

Pobieranie wszystkich elementów mających klasy "example" i "color":

const collection = document.getElementsByClassName("example color");

Spróbuj sam

Przykład 3

Liczba elementów o klasie "example":

let numb = document.getElementsByClassName("example").length;

Spróbuj sam

Przykład 4

Zmień kolor tła wszystkich elementów o klasie "example":

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Spróbuj sam

Gramatyka

document.getElementsByClassName("example")classname)

Parametr

Parametr Opis
classname

Wymagane. Nazwa klasy elementu.

Można wyszukiwać wiele klas rozdzielonych spacjami, na przykład "test demo".

Zwraca wartość

Typ Opis
Obiekt

Obiekt HTMLCollection.

Zbiór elementów o określonej nazwie klasy.

Sortuje elementy w kolejności ich występowania w dokumencie.

Wsparcie przeglądarki

document.getElementsByClassName() To cecha DOM Level 1 (1998).

Obsługiwane przez wszystkie przeglądarki:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie 9-11 Wsparcie Wsparcie Wsparcie Wsparcie

Strony związane

Tutorial CSS:Gramatyka CSS

Przeglądarka CSS:Wybieracz .class CSS

Przeglądarka DOM HTML:element.getElementsByClassName()

Przeglądarka DOM HTML:Atrybut className

Przeglądarka DOM HTML:Atrybut classList

Przeglądarka DOM HTML:Obiekt Style