getElementsByClassName() w JavaScript

getElementsByClassName() to metoda DOM służąca do pobierania elementów HTML na podstawie wartości atrybutu class.

Metoda jest najczęściej wywoływana na obiekcie document:

const elementy = document.getElementsByClassName('akapit');

Powyższy kod wyszuka elementy, które mają klasę akapit, np.:

<p class="akapit">akapit4</p>

Ważne zasady

• w argumencie podaje się nazwę klasy bez kropki, czyli akapit, a nie .akapit,
• metoda szuka wartości atrybutu class,
• nie szuka tekstu znajdującego się między znacznikami,
• nie szuka wartości atrybutu id,
• zwraca kolekcję elementów typu HTMLCollection, nawet jeśli znaleziono tylko jeden element.

Przykład

<p class="akapit">Pierwszy akapit</p>
<p class="akapit">Drugi akapit</p>
<p id="akapit">To nie zostanie znalezione przez tę metodę</p>

<script>
  const akapity = document.getElementsByClassName('akapit');
  console.log(akapity.length); // 2
</script>

Typowy błąd egzaminacyjny

Dla wywołania:

document.getElementsByClassName('akapit');

poprawnym elementem będzie:

<p class="akapit">akapit4</p>

Nie będzie nim p id="akapit", ponieważ id i class to różne atrybuty HTML.