getElementsByClassName() to metoda DOM służąca do pobierania elementów HTML mających wskazaną klasę CSS. Wywołuje się ją najczęściej na obiekcie document.
Składnia
document.getElementsByClassName("nazwaKlasy")
Metoda zwraca kolekcję elementów typu HTMLCollection, a nie pojedynczy element. Oznacza to, że nawet jeśli na stronie istnieje tylko jeden pasujący element, trzeba odwołać się do niego przez indeks, np. [0].
Przykład
HTML:
<p class="akapit">Tekst akapitu</p>
<p class="akapit">Drugi akapit</p>
JavaScript:
let elementy = document.getElementsByClassName("akapit");
elementy[0].style.color = "red";
Kod pobiera wszystkie elementy z klasą akapit, a następnie zmienia kolor pierwszego z nich.
Ważne na egzaminie
getElementsByClassName("akapit") szuka elementów z atrybutem:
class="akapit"
Nie szuka tekstu zawartego między znacznikami, np. <p>akapit</p>, ani atrybutu id="akapit". Dlatego poprawnym elementem dla tej metody jest np.:
<p class="akapit">akapit4</p>