document.getElementById() w JavaScript

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

Co robi document.getElementById()?

document.getElementById(id) to metoda DOM w JavaScript, która służy do wyszukania elementu HTML na stronie na podstawie wartości atrybutu id.

Zwraca ona referencję do elementu, czyli obiekt reprezentujący dany znacznik HTML. Dzięki temu można później zmieniać jego treść, style, atrybuty albo reagować na zdarzenia.

Składnia

document.getElementById("identyfikator")

Argumentem jest tekstowa wartość atrybutu id, bez znaku #.

Przykład HTML

<p id="komunikat">Stary tekst</p>
<button onclick="zmienTekst()">Zmień</button>

Przykład JavaScript

function zmienTekst() {
  const element = document.getElementById("komunikat");
  element.textContent = "Nowy tekst";
}

W tym przykładzie metoda odnajduje element <p> o id="komunikat", a następnie zmienia jego zawartość tekstową.

Co zwraca metoda?

  • jeśli element istnieje: zwraca obiekt elementu HTML,
  • jeśli element nie istnieje: zwraca null.

Dlatego w praktyce często sprawdza się wynik:

const el = document.getElementById("box");

if (el !== null) {
  el.style.color = "red";
}

Ważne na egzaminie

getElementById() nie pobiera automatycznie danych z formularza, nie waliduje formularza i nie wypisuje tekstu na stronie. Jej podstawowym zadaniem jest zwrócenie referencji do elementu HTML o podanym identyfikatorze.