Manipulacja Strukturą HTML w JavaScript (DOM)

Najczęstszy schemat egzaminu z Frontendu na INF.03 wygląda tak: Zbuduj formularz rejestracji (HTML) z przyciskiem, a następnie napisz Skrypt (JS), który pobierze to co wpisał użytkownik, sprawdzi to i wypisze pod spodem "Zarejestrowano pomyślnie!".

Drzewo DOM (Document Object Model) to reprezentacja Twojego kodu HTML w pamięci przeglądarki. Dzięki JS-owi, masz dostęp do każdej najmniejszej gałęzi i listka tego drzewa.

Krok 1: Łapanie "Zaczepów" (getElementById)

Aby zmienić nagłówek albo odczytać input, JS musi najpierw ten element "złapać". HTML musi w tym pomóc, posiadając atrybut id.

<input type="number" id="wiek_usera">
<div id="wynik_na_ekranie"></div>

W JS wyciągamy te "uchwyty" do zmiennych:

const poleWiek = document.getElementById("wiek_usera");
const poleWyniku = document.getElementById("wynik_na_ekranie");

Krok 2: Odczytywanie wpisanych danych (value)

Użytkownik wpisał coś do okienka tekstowego? Aby to wyciągnąć w JS, korzystamy z własności .value.

let wczytanyWiek = poleWiek.value; // Własność pól input!

// Pamiętaj: .value ZAWSZE oddaje tekst! Przekonwertuj to na liczbę jeśli chcesz liczyć!
let wiekLiczba = parseInt(wczytanyWiek);

Krok 3: Wyświetlanie wyników na ekranie (innerHTML)

Egzaminator wymagał, by wynik pokazał się pod formularzem? Złapaliśmy już nasz div (zmienna poleWyniku). Pola typu div/p/h1 nie mają właściwości .value (bo w nich się nie pisze), ale mają właściwość wnętrza, czyli .innerHTML!

poleWyniku.innerHTML = "Wypisuję to z JavaScriptu! Wynik wynosi: " + (wiekLiczba * 2);

CKE Special: Podmiana klas i stylów 🪤

Zadanie z egzaminu: "Jeśli zaznaczono checkbox, zmień kolor akapitu na czerwony, a w przeciwnym razie na czarny".

Możesz to zrobić na dwa sposoby:

1. Bezpośrednia manipulacja stylem (w JS): poleWyniku.style.color = "red"; (Własności wieloczłonowe z CSS piszemy w "camelCase", czyli zamiast background-color piszesz style.backgroundColor!)
2. Dodanie/Usunięcie klasy CSS (bardziej zalecane): poleWyniku.classList.add("uwaga"); // Dodaje klasę .uwaga z CSS poleWyniku.classList.remove("uwaga"); // Zabiera klasę

Dzięki DOM możesz modyfikować stronę całkowicie dynamicznie, bez odświeżania okna. Znasz już potężną broń do rozbijania w pył arkuszy INF.03!