JavaScript getElementsByClassName (Polski)

Podsumowanie: w tym samouczku nauczysz się, jak używać metody getElementsByClassName() do wybierania elementów według nazwy klasy.

Wprowadzenie do metody getElementsByClassName ()

Każdy element HTML ma opcjonalny atrybut klasy, taki jak ten:

Code language: HTML, XML (xml)

Wartością atrybutu class jest rozdzielona spacjami lista klas elementu. W klasach rozróżniana jest wielkość liter.

W klasach można używać CSS do dopasowywania elementów. Na przykład:

Code language: CSS (css)

W JavaScript używa się metody getElementsByClassName() do wybierania elementów na podstawie ich klas.

Metoda getElementsByClassName() jest dostępna w obiekcie document i dowolnym elemencie HTML.

Metoda getElementsByClassName() akceptuje pojedynczy argument, który jest ciągiem zawierającym jedną lub więcej nazw klas:

Code language: JavaScript (javascript)

W tym składni, parametr classNames jest ciągiem znaków reprezentującym nazwę klasy do dopasowania. Na przykład:

Code language: JavaScript (javascript)

Jeśli dopasujesz elementy według wielu klas, musisz użyć spacji, aby oddzielić je w ten sposób:

Code language: JavaScript (javascript)

Pamiętaj, że nie możesz używać selektorów klas, np. .btn lub .btn-primary dla getElementsByClassName().

Metoda getElementsByClassName() zwraca na żywo HTMLCollection elementów, które jest obiektem przypominającym tablicę.

Jeśli wywołasz metodę getElementsByClassName() na obiekcie document, metoda wyszukuje dla elementów z określonymi nazwami klas w całym dokumencie.

Jednak gdy wywołasz metodę getElementsByClassName() na określonym elemencie, zwraca ona tylko pasujące elementy w poddrzewo tego elementu.

Przykłady JavaScript getElementsByClassName ()

Weźmy kilka przykładów użycia metody getElementsByClassName().

Załóżmy, że masz następujący kod HTML:

1) Wywołanie JavaScript getElementsByClassName () na przykładzie elementu

Poniższy przykład ilustruje sposób użycia metody getElementsByClassName() do wybrania <li> elementy, które są potomkami elementu <ul>:

Dane wyjściowe:

Code language: JavaScript (javascript)

Jak to działa:

• Najpierw wybierz element <ul> z nazwą klasy menu przy użyciu metody getElementById().
• Następnie wybierz elementy <li>, które są potomkami elementu <ul>, używając metody getElementsByClassName().
• Na koniec utwórz tablicę z treścią tekstową <li> poprzez wypożyczenie metody map() obiektu Array.

2) Wywołanie JavaScript getElementsByClassName () na przykładzie dokumentu

Aby wyszukać element z class heading-secondary, używasz następującego kodu:

Dane wyjściowe:

Code language: JavaScript (javascript)

Ten przykład wywołuje metodę getElementsByClassName() na obiekcie document, dlatego szuka elementów z klasą heading-secondary w całym dokumencie.

W tym samouczku nauczyłeś się, jak używać metody getElementsByClassName() do wybierania elementów według jednej lub kilku nazw klas.