Uchwycenie elementu HTML w JavaScript

Mirosław Zelent | 08-01-2018

Wybrany element HTML (który posiada ustawiony identyfikator) możemy "uchwycić" do edycji w JavaScript z użyciem metody document.getElementById(). Uchwyt pozwala uzyskać łatwy dostęp do wielu atrybutów obiektu, które możemy nie tylko odczytać, ale także odpowiednio zmodyfikować. W przykładzie poniżej uchwycono pole edycyjne o identyfikatorze "pole", po czym odczytano wartość atrybutu value (atrybut ten przechowuje napis aktualnie znajdujący się w polu tekstowym):

HTML

<input type="text" id="pole">

JavaScript

var napis = document.getElementById("pole").value;

Po wykonaniu powyższej linii w zmiennej napis znajdować się będzie tekst pobrany z wybranego pola edycyjnego. Co ważne – sam uchwyt to jeszcze nie wartość w polu! Zwróćmy uwagę, że dopiero użycie uchwytu do dostania się do atrybutu umożliwiło nam odczyt:

uchwyt i atrybut

Koniecznie nie zapomnij na egzaminie o tym, iż sam uchwyt elementu (bez określonego po kropce atrybutu) nie pozwoli dokonać odczytu tekstu w polu edycyjnym (czy jakiegokolwiek innego atrybutu – zapamiętaj: “uchwyt kropka atrybut”, sam uchwyt to za mało).