Najnowsze tutoriale tworzenie stron internetowych
 

HTML DOM getElementsByClassName() Method

<Element Przedmiot

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.

Przykłady

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


<Element Przedmiot