document.getElementById() w JavaScript

document.getElementById() w JavaScript

document.getElementById() to metoda JavaScript służąca do pobrania z dokumentu HTML elementu o podanym identyfikatorze id. Jest bardzo często używana do modyfikowania treści, stylów lub obsługi zachowania elementów strony.

Składnia

var elem = document.getElementById("para1");

Powyższy kod wyszukuje element HTML z atrybutem:

id="para1"

Jeżeli taki element istnieje, zostaje zapisany w zmiennej elem. Jeśli nie istnieje, metoda zwraca null.

Zmiana stylu elementu

Po pobraniu elementu można zmieniać jego właściwości CSS przez obiekt style:

elem.style.color = "blue";

Ten zapis zmienia kolor tekstu wewnątrz wskazanego elementu na niebieski. Nie zmienia koloru przycisku ani innych elementów, jeśli nie mają wskazanego identyfikatora.

Przykład

<p id="para1">Przykładowy tekst</p>
<p>i skrypt</p>
<button onclick="changeColor('blue')">niebieski</button>

<script>
function changeColor(newColor) {
  var elem = document.getElementById("para1");
  elem.style.color = newColor;
}
</script>

Po kliknięciu przycisku zostanie wykonana funkcja changeColor('blue'). Funkcja pobierze element o id="para1", czyli pierwszy akapit z tekstem Przykładowy tekst, a następnie ustawi jego kolor na niebieski.

Ważne na egzaminie

• id powinno jednoznacznie wskazywać jeden element strony.
• getElementById("para1") nie pobiera tekstu ani przycisku, tylko element z takim id.
• style.color zmienia kolor tekstu elementu, a nie kolor tła.