Úloha 1 – Práce s DOM (querySelector, classList)

Úvod do úlohy

Práce s Document Object Modelem (DOM) patří k nejdůležitějším dovednostem každého webového vývojáře. DOM je prostředník mezi HTML strukturou stránky a JavaScriptem – díky němu dokážeme za běhu programu měnit texty, obrázky, barvy, třídy, styly i celé části stránky. Pomocí DOMu vytváříme interaktivní weby: tlačítka, která reagují na kliknutí, formuláře, které ověřují vstupy, nebo dynamické seznamy, které se mění podle uživatelského vstupu.

Teorie a principy

DOM můžeme chápat jako stromovou strukturu, kde je každý HTML prvek reprezentován uzlem (node). Na úplném vrcholu je objekt document, který představuje celý dokument. Pomocí jeho metod můžeme vyhledávat, přidávat, měnit nebo odstraňovat jednotlivé uzly.

Nejpoužívanější metody pro přístup k prvkům:

• document.getElementById("id") – najde prvek podle atributu id

• document.getElementsByClassName("nazevTridy") – vrátí kolekci prvků se stejnou třídou

• document.getElementsByTagName("p") – vybere všechny elementy daného typu (např. <p>)

• document.querySelector("selector") – najde první prvek podle CSS selektoru

• document.querySelectorAll("selector") – najde všechny odpovídající prvky

Každý uzel má vlastnosti, které lze číst nebo měnit. Například textContent obsahuje text uvnitř elementu a style umožňuje upravovat vzhled pomocí JavaScriptu.

Umožňuje to například:

Kromě změn obsahu můžeme reagovat na události (events) – například kliknutí, pohyb myši, stisk klávesy apod. Události se připojují pomocí metody addEventListener():

Praktické příklady kódu

Příklad 1: Změna textu po kliknutí na tlačítko

Příklad 2: Změna barvy pozadí pomocí CSS třídy

Typické chyby / záludnosti

1. Přístup k neexistujícímu prvku – pokud JavaScript běží dříve, než je element načten, getElementById() vrátí null.
   🔹 Řešení: umístěte <script> až na konec <body> nebo použijte událost DOMContentLoaded.

2. Záměna metod – querySelector() vrací pouze první nalezený prvek, zatímco querySelectorAll() vrací všechny.

3. Chybné přiřazení stylu – vlastnost style funguje jen na inline styly. Pokud potřebujete složitější vzhled, použijte raději CSS třídy a classList.

4. Zapomenuté posluchače událostí – přímé přiřazení onclick funguje, ale přepíše jiné posluchače. Lepší je používat addEventListener().

Shrnutí

• DOM představuje HTML dokument jako strom objektů.

• Pomocí objektu document můžeme vyhledávat a měnit prvky.

• K obsahu přistupujeme přes vlastnosti jako textContent, innerHTML nebo style.

• Reakce na uživatelské akce zajišťují události (např. click, mouseover, keyup).

• Správné používání classList a addEventListener() umožňuje psát přehledný a rozšiřitelný kód.

Úloha

Zadání (kontext úlohy):

Vytvoř jednoduchou webovou stránku, která umožní přepínat mezi světlým a tmavým režimem kliknutím na tlačítko. Při přepnutí se změní pozadí stránky a barva textu.

Cíl úlohy:

Procvičit si práci s DOM – výběr prvků pomocí querySelector(), použití classList.toggle() a připojení události click.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
Stylování probíhá přes CSS třídy uvnitř <style> v hlavičce.
JavaScript se zapisuje do <script> na konci stránky.

Požadovaný výstup:

• Na stránce bude:

  • nadpis <h1> s textem „Režim zobrazení“

  • odstavec s textem „Kliknutím přepni mezi světlým a tmavým režimem.“

  • tlačítko s textem „Přepnout režim“

• Po kliknutí na tlačítko se:

  • přepne CSS třída dark na elementu <body>,

  • změní barva pozadí (např. černá) a barva textu (např. bílá),

  • text tlačítka se změní na „Přepnout zpět“.

• Opětovným kliknutím se stránka vrátí do světlého režimu a tlačítko opět ukazuje „Přepnout režim“.

Doplňující pokyny:

• Použij document.querySelector() pro výběr tlačítka i těla stránky.

• Využij classList.toggle() k přepínání třídy dark.

• Pomocí if rozhodni, jaký text má tlačítko zobrazit.

• Nezapomeň, že if (podmínka == true) je srozumitelnější pro začátečníky než zkrácený zápis.

Řešení úlohy

Co je zde splněno

• Použití querySelector() pro výběr prvků.

• Využití classList.toggle("dark") pro přepínání režimu.

• Změna textu tlačítka podle aktivní třídy.

• Stylování obou režimů přímo v <style>.

• Vše v jednom souboru, jak požaduje zadání.

Vylepšení oproti začátečnické verzi

• Použití šipkové funkce a ternárního operátoru pro zkrácený a přehledný zápis.

• Přidán plynulý přechod mezi režimy pomocí transition.

• Styl tlačítka se také mění podle režimu.

• Celkově modernější a elegantnější zápis vhodný pro praxi.

Poznámky

• Častou chybou je zapomenout na == true u podmínky nebo na textContent místo innerHTML.

• Je vhodné přidat mírnou animaci přechodu (např. transition) pro plynulejší efekt – viz pokročilá varianta.