document.getElementById() w JavaScript

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

Co to jest document.getElementById()?

document.getElementById() to metoda JavaScript służąca do wyszukania elementu HTML po jego identyfikatorze id. Zwraca ona odwołanie do elementu, dzięki czemu można później zmieniać jego treść, styl lub atrybuty.

Jest to jedna z podstawowych metod pracy z DOM (Document Object Model).

Składnia

document.getElementById("nazwaId");

Argumentem jest wartość atrybutu id elementu, zapisana jako tekst.

Co zwraca ta metoda?

  • obiekt elementu HTML – jeśli taki element istnieje,
  • null – jeśli na stronie nie ma elementu o podanym id.

Przykład użycia

HTML:

<p id="komunikat">Witaj</p>

JavaScript:

let element = document.getElementById("komunikat");
element.innerHTML = "Witaj użytkowniku";

W tym przykładzie metoda znajduje akapit o id="komunikat", a następnie zmienia jego zawartość.

Zastosowania

document.getElementById() używa się m.in. do:

  • pobierania elementów formularza,
  • zmiany tekstu na stronie,
  • zmiany stylu elementu,
  • reagowania na działania użytkownika,
  • odczytu lub ustawiania wartości pól.

Przykład zmiany stylu:

document.getElementById("box").style.backgroundColor = "yellow";

Ważne informacje egzaminacyjne

  • metoda nie umieszcza tekstu na stronie,
  • metoda nie sprawdza poprawności formularza,
  • metoda nie zapisuje danych do zmiennej id,
  • metoda zwraca odnośnik do elementu o wskazanym id.

Na co uważać?

W dokumencie HTML wartość id powinna być unikalna. Jeśli identyfikator zostanie użyty błędnie lub element nie istnieje, wynik będzie null, co może powodować błąd przy dalszych operacjach.

Podsumowanie

document.getElementById() to metoda służąca do odnalezienia konkretnego elementu HTML po id. Jest bardzo często wykorzystywana w zadaniach egzaminacyjnych i praktyce programowania stron internetowych.