Metoda HTML DOM getElementsByClassName()

Przykład

Zmień tekst pierwszego elementu listy z class="child" (indeks 0) na liście z class="example":

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Metoda getElementsByClassName() zwraca kolekcję elementów podrzędnych elementu o określonej nazwie klasy jako obiekt NodeList.

Obiekt NodeList reprezentuje kolekcję węzłów. Dostęp do węzłów można uzyskać za pomocą numerów indeksów. Indeks zaczyna się od 0.

Wskazówka: Możesz użyć właściwości length obiektu NodeList, aby określić liczbę węzłów podrzędnych o określonej nazwie klasy, a następnie możesz przejść przez wszystkie węzły i wyodrębnić żądane informacje.

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.

Method
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

Składnia

element.getElementsByClassName(classname)

Wartości parametrów

Parameter	Type	Description
classname	String	Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color".

Szczegóły techniczne

Wersja DOM:	Obiekt elementu podstawowego poziomu 1
Wartość zwrotu:	Obiekt NodeList reprezentujący kolekcję elementów podrzędnych elementów o określonej nazwie klasy. Elementy w zwróconej kolekcji są sortowane tak, jak pojawiają się w kodzie źródłowym.

Więcej przykładów

Przykład

Zmień kolor tła drugiego elementu za pomocą class="child" wewnątrz elementu <div>:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

Przykład

Dowiedz się, ile elementów z class="child" znajduje się wewnątrz elementu <div> (używając właściwości length obiektu NodeList):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

Przykład

Zmień kolor tła pierwszego elementu za pomocą klasy "child" i "color" wewnątrz elementu z class="example":

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

Przykład

Zmień kolor tła wszystkich elementów z class="child" wewnątrz elementu <div>:

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}