Przykład
Zmień tekst pierwszego elementu listy z class = „dziecko” (index 0) w liście z class = „przykład”:
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Przed zmianą tekst:
- Coffee
- Tea
Po zmianie tekst:
- Milk
- Tea
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
getElementsByClassName() Metoda zwraca kolekcję elementów podrzędnych elementu jest o podanej nazwie klasy jako obiekt NodeList.
Przedmiotem NodeList reprezentuje zbiór węzłów. Węzły mogą być dostępne za pomocą numerów indeksowych. Indeks zaczyna się od 0.
Wskazówka: Można użyć length właściwość obiektu NodeList aby określić liczbę węzłów potomnych o podanej nazwie klasy, można pętli wszystkich węzłów i wyodrębnić informacje, które chcesz.
Wsparcie przeglądarka
Liczby w tabeli określa pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
metoda | |||||
---|---|---|---|---|---|
getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Składnia
element .getElementsByClassName( classname )
wartości parametrów
Parametr | Rodzaj | Opis |
---|---|---|
classname | String | Wymagany. Nazwa klasy elementów podrzędnych chcesz uzyskać. Aby wyszukać wiele nazw klas, rozdzielając je spacjami, jak "child color" . |
Szczegóły techniczne
DOM wersja: | Poziom Rdzeń 1 elementu obiektu |
---|---|
Zwracana wartość: | Obiekt NodeList, stanowiących zbiór elementów podrzędnych elementy z podaną nazwą klasy. Elementy w zwróconym kolekcji są klasyfikowane jako wydają w kodzie źródłowym. |
Więcej przykładów
Przykład
Zmienić kolor tła drugi element z class = „dziecko” z wewnątrz <div> element:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor
= "red";
Spróbuj sam " Przykład
Dowiedzieć się, jak wiele elementów z class = „dziecko” istnieją wewnątrz <div> elementu (za pomocą właściwości length obiektu NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Wynikiem X będzie:
3
Spróbuj sam " Przykład
Zmienić kolor tła pierwszego elementu zarówno z "child" i "color" klasy wewnątrz elementu z class = „przykład”:
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Spróbuj sam " Przykład
Zmienić kolor tła wszystkich elementów z class = „dziecko” wewnątrz z <div> element:
var x = document.getElementById("myDIV");
var y =
x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++)
{
y[i].style.backgroundColor = "red";
}
Spróbuj sam " Podobne strony
CSS: CSS selektory
CSS: CSS Selector .class
HTML DOM: dokument. getElementsByClassName()
HTML DOM: className Property
HTML DOM: classList Property
HTML DOM: HTML DOM Style obiektu