Jak vybrat prvky podle názvu třídy pomocí JavaScriptu

getElementsByClassName() poskytuje rychlý způsob, jak vybrat všechny prvky DOM, které obsahují konkrétní třídu CSS v JavaScriptu. Vrací objekt HTMLCollection, což je objekt podobný poli obsahující kolekci prvků HTML.

Následující příklad ukazuje, jak můžete použít getElementsByClassName() metoda výběru a iterace přes vše Prvky HTML, které mají active název třídy:

const elems = document.getElementsByClassName('active');

// iterate over all HTML elements
for (const el of elems) {
    console.log(el.innerText);
}

Od HTMLCollection není NodeList ani pole, nemůžete použít smyčku forEach() nad jeho prvky. Proto jsem ve výše uvedeném příkladu použil příkaz for...of.

getElementsByClassName() metoda funguje ve všech moderních i starých prohlížečích včetně Internet Exploreru 9 a vyšších. Protože jej lze použít pouze k výběru prvků podle názvu třídy, jeho použití je omezené.

Pokud chcete větší flexibilitu chcete-li vybrat prvky DOM libovolnými selektory CSS, použijte místo toho metodu querySelectorAll():

const elems = document.querySelectorAll('active');

Podívejte se na průvodce výběrem prvků DOM, kde se dozvíte více o různých způsobech získání prvků DOM v JavaScriptu.