HTMLCollection w JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Co to jest HTMLCollection?

HTMLCollection to kolekcja elementów HTML zwracana przez niektóre metody DOM, np. document.getElementsByTagName() albo document.getElementsByClassName().

Nie jest to zwykła tablica, ale obiekt podobny do tablicy. Oznacza to, że elementy można pobierać przez indeks, np. [0], [1], [2], ale nie wszystkie metody tablicowe są dostępne bezpośrednio.

Indeksowanie elementów

Indeksy w JavaScript zaczynają się od 0. Dlatego pierwszy element kolekcji ma indeks 0, drugi 1, trzeci 2.

Przykład HTML:

<p>pierwszy paragraf</p>
<p>drugi paragraf</p>
<p>trzeci paragraf</p>

Pobranie pierwszego akapitu:

const pierwszy = document.getElementsByTagName('p')[0];

Metoda getElementsByTagName('p') zwraca kolekcję wszystkich znaczników <p>, a [0] wybiera pierwszy z nich.

Cechy HTMLCollection

  • zawiera elementy HTML znalezione w dokumencie,
  • elementy są dostępne przez indeksy liczone od zera,
  • często jest kolekcją „żywą”, czyli może aktualizować się po zmianach w DOM,
  • nie jest pełną tablicą JavaScript.

Typowy błąd egzaminacyjny

Częsty błąd to pomylenie metody getElementById() z pobieraniem po nazwie znacznika. getElementById() służy do pobierania elementu o konkretnym atrybucie id, natomiast do pobierania znaczników, np. wszystkich akapitów, używa się getElementsByTagName().