Ú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

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.
Záměna metod – querySelector() vrací pouze první nalezený prvek, zatímco querySelectorAll() vrací všechny.
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.
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.