document.getElementsByTagName() w JavaScript

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

document.getElementsByTagName() w JavaScript

document.getElementsByTagName() to metoda DOM w JavaScript, która zwraca wszystkie elementy HTML o podanej nazwie znacznika, np. wszystkie akapity <p>, wszystkie obrazy <img> albo wszystkie linki <a>.

Składnia

document.getElementsByTagName("nazwa_znacznika")

Przykład:

const akapity = document.getElementsByTagName("p");

Metoda zwraca kolekcję elementów typu HTMLCollection, a nie pojedynczy element. Do konkretnego elementu odwołujemy się przez indeks, podobnie jak w tablicy.

Dostęp do pierwszego elementu

Indeksy w JavaScript zaczynają się od 0, dlatego pierwszy element ma indeks [0].

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

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

Powyższy kod pobiera pierwszy akapit z dokumentu HTML.

Ważna uwaga egzaminacyjna

Poprawna nazwa metody w JavaScript to:

document.getElementsByTagName("p")

czyli Elements w liczbie mnogiej. W pytaniach egzaminacyjnych może pojawić się zapis uproszczony lub z literówką, ale sens odpowiedzi polega na pobraniu elementów po nazwie znacznika i wybraniu pierwszego przez [0].

Kiedy stosować?

Metody tej używa się, gdy elementy nie mają identyfikatora id ani klasy, ale wiadomo, jakiego są typu, np. wszystkie akapity <p>.

document.getElementsByTagName("p")[0].style.color = "red";

Ten kod zmieni kolor tekstu pierwszego akapitu na czerwony.