Metoda getElementsByClassName() HTML DOM Element

Definicja i użycie

getElementsByClassName() Metoda zwraca zbiór podelementów o podanej klasie, jako obiekt NodeList.

Zobacz również:

Atrybut classList

Atrybut className

Metoda querySelector()

Metoda querySelectorAll()

Metoda getElementsByTagName()

Obiekt Style HTML DOM

Tutorial:

Gramatyka CSS

Selektor CSS

Przeglądarka selektorów CSS

NodeList

NodeList To zbiorowisko węzłów podobnych do tablicy (lista).

Możesz uzyskać dostęp do węzłów w liście za pomocą indeksu (indeksu). Indeks zaczyna się od 0.

Atrybut lengthZwraca liczbę węzłów w liście.

Przykład

Przykład 1

Zmień tekst pierwszego elementu listy za pomocą klasy "child":

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

Spróbuj sam

Przykład 2

Liczba elementów klasy "child" w "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Spróbuj sam

Przykład 3

Zmień rozmiar drugiego elementu klasy "child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Spróbuj sam

Przykład 4

Użyj klas "child" i "color" w drugim elemencie z klasą "example", aby zmienić rozmiar pierwszego elementu:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Spróbuj sam

Przykład 5

Zmień kolor wszystkich elementów z klasą "child" w "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Spróbuj sam

Gramatyka

element.getElementsByClassName(classname)

Parametr

Parametr Opis
classname

Wymagane. Nazwa klasy podelementu.

Rozdziel nazwy za pomocą spacji (np. "child color").

Zwrócona wartość

Typ Opis
NodeList

Podelementy zawierające elementy o podanej nazwie klasy.

Elementy są sortowane według kolejności ich wystąpienia w kodzie źródłowym.

Wsparcie przeglądarek

element.getElementsByClassName() To jest cecha DOM Level 1 (1998).

Wszystkie przeglądarki wspierają to w pełni:

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