document.getElementsByClassName() w JavaScript

document.getElementsByClassName() to metoda DOM służąca do pobierania elementów HTML mających podaną klasę CSS.

Składnia

var elementy = document.getElementsByClassName("styl1");

Kod pobiera wszystkie elementy dokumentu, które mają przypisaną klasę styl1, np.:

<p class="styl1">Akapit</p>
<div class="styl1">Blok</div>

Co zwraca metoda?

Metoda zwraca kolekcję HTMLCollection, czyli zbiór elementów DOM. Nie jest to zwykła tablica, ale można korzystać z indeksów oraz właściwości length:

for (var i = 0; i < elementy.length; i++) {
  elementy[i].style.fontWeight = "bolder";
}

Ten kod przechodzi po wszystkich znalezionych elementach i ustawia dla nich styl font-weight: bolder.

Ważne informacje egzaminacyjne

• getElementsByClassName("styl1") wybiera elementy po klasie, nie po identyfikatorze id.
• Jeśli kilka elementów ma tę samą klasę, metoda pobierze je wszystkie.
• Aby zmienić każdy element z kolekcji, zwykle stosuje się pętlę.
• Jeśli żaden element nie ma danej klasy, kolekcja będzie pusta, a pętla się nie wykona.

Przykład działania

<p class="styl1">Tekst 1</p>
<p class="styl1">Tekst 2</p>
<p>Tekst 3</p>

Po wykonaniu skryptu pogrubione zostaną tylko pierwsze dwa akapity, ponieważ tylko one mają klasę styl1.