JavaScript getElementsByClassName (Čeština)

Souhrn: v tomto výukovém programu se naučíte, jak pomocí metody getElementsByClassName() vybírat prvky podle názvu třídy.

Úvod do metody getElementsByClassName ()

Každý prvek HTML má volitelný atribut třídy, jako je tento:

Code language: HTML, XML (xml)

Hodnota atributu třídy je seznam tříd prvku oddělených mezerami. Třídy rozlišují velká a malá písmena.

Třídy vám umožňují používat CSS k porovnávání prvků. Například:

Code language: CSS (css)

V JavaScriptu použijete metodu getElementsByClassName() k výběru prvků na základě jejich tříd.

Metoda getElementsByClassName() je k dispozici pro objekt document a jakýkoli prvek HTML.

Metoda getElementsByClassName() přijímá jediný argument, kterým je řetězec, který obsahuje jeden nebo více názvů tříd:

Code language: JavaScript (javascript)

V tomto syntaxe, parametr classNames je řetězec, který představuje shodný název třídy. Například:

Code language: JavaScript (javascript)

Pokud přiřadíte prvky více třídám, musíte je oddělit takto pomocí mezer:

Code language: JavaScript (javascript)

Upozorňujeme, že nelze použít selektory tříd, např. .btn nebo .btn-primary pro getElementsByClassName() metoda.

Metoda getElementsByClassName() vrací živý HTMLCollection prvků, které je objekt podobný poli.

Pokud na objektu document zavoláte metodu getElementsByClassName(), metoda vyhledá pro prvky se zadanými názvy tříd v celém dokumentu.

Když však zavoláte metodu getElementsByClassName() na konkrétní prvek, vrátí pouze odpovídající prvky v podstrom tohoto prvku.

JavaScript getElementsByClassName () příklady

Vezměme si několik příkladů použití metody getElementsByClassName().

Předpokládejme, že máte následující HTML:

1) Volání JavaScriptu getElementsByClassName () na příkladu prvku

Následující příklad ukazuje, jak pomocí metody getElementsByClassName() vybrat <li> položky, které jsou potomky elementu <ul>:

Výstup:

Code language: JavaScript (javascript)

Jak to funguje:

• Nejprve vyberte prvek <ul> s názvem třídy menu pomocí getElementById() metody.
• Poté vyberte prvky <li>, které jsou potomky <ul> prvek pomocí metody getElementsByClassName().
• Nakonec vytvořte pole textového obsahu <li> prvky zapůjčením map() metody Array objektu.

2) Volání JavaScriptu getElementsByClassName () na příkladu dokumentu

Chcete-li vyhledat prvek pomocí třída heading-secondary, použijete následující kód:

Výstup:

Code language: JavaScript (javascript)

Tento příklad zavolá metodu getElementsByClassName() na objekt document, proto vyhledá prvky třídy heading-secondary v celém dokumentu.

V tomto výukovém programu jste se naučili používat metodu getElementsByClassName() k výběru prvků podle jednoho nebo více názvů tříd.