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.