Úloha 2 – DOM manipulace: čtení a zápis hodnot z inputu

Úvod do úlohy

Po zvládnutí základů přístupu k elementům se v další fázi naučíme měnit jejich obsah a vlastnosti. Právě tato schopnost dává JavaScriptu jeho sílu – umožňuje nám živě upravovat obsah webové stránky, reagovat na vstup uživatele, načítat data z jiných zdrojů nebo měnit styl prvků podle situace.

Typickým příkladem je aktualizace textu po kliknutí, výměna obrázku, zobrazení výsledku výpočtu nebo zvýraznění aktivního tlačítka. Abychom to dokázali bezpečně a efektivně, musíme pochopit rozdíly mezi různými vlastnostmi prvků – zejména textContent, innerHTML, value a src.

Teorie a principy

Každý HTML prvek má určité vlastnosti a atributy, které určují jeho obsah, vzhled i chování. Pomocí DOM s nimi můžeme pracovat přímo v JavaScriptu.

Změna textu a HTML obsahu

textContent
Vrací nebo nastavuje čistý text uvnitř elementu. Je bezpečný, protože neinterpretuje HTML značky.
Používá se tam, kde nechceme, aby se uživatelský vstup změnil v kód.
innerHTML
Vrací nebo nastavuje HTML obsah uvnitř elementu. Umožňuje vkládat značky, např. <b>, <p>, <img> atd.
Je však potenciálně nebezpečný, pokud vkládáme text od uživatele – mohl by obsahovat škodlivý kód (XSS útok).

Práce s formuláři a obrázky

value – používá se u vstupních polí (<input>, <textarea>), kde představuje aktuální hodnotu.
src – odkazuje na zdroj obrázku, videa nebo skriptu. Pomocí této vlastnosti můžeme měnit obrázky za běhu programu.

Práce s atributy

Každý HTML element má také atributy, které lze číst a měnit metodami:

getAttribute("nazev") – vrátí hodnotu atributu
setAttribute("nazev", "hodnota") – nastaví novou hodnotu
removeAttribute("nazev") – smaže atribut z elementu

Práce s CSS třídami

Pomocí objektu classList můžeme jednoduše ovládat CSS třídy:

element.classList.add("trida") – přidá třídu
element.classList.remove("trida") – odstraní třídu
element.classList.toggle("trida") – přepne třídu (pokud je, odebere ji, jinak přidá)
element.classList.contains("trida") – vrací true / false podle přítomnosti třídy

Praktické příklady kódu

Příklad 1: Bezpečná změna textu pomocí `textContent`

Příklad 2: Vložení HTML pomocí `innerHTML` (pozor na bezpečnost!)

Příklad 3: Změna atributu obrázku

Příklad 4: Přepínání CSS třídy pomocí `classList`

Typické chyby / záludnosti

Použití innerHTML pro neověřený obsah
Pokud do innerHTML vložíte text z uživatelského vstupu, hrozí bezpečnostní riziko (XSS útok). Používejte ho jen tam, kde HTML znáte a kontrolujete.
Záměna textContent a innerHTML
textContent pracuje pouze s textem, zatímco innerHTML zpracuje i značky. Výsledky mohou být jiné, než očekáváte.
Změna atributu místo vlastnosti
Např. element.src = "obrazek.png" má stejný efekt jako setAttribute("src", "obrazek.png"), ale ne všechny atributy fungují tímto způsobem (např. className vs. class).
Zapomenuté přepínání tříd
Místo složité kontroly if (classList.contains(...)) používejte elegantní toggle().

Shrnutí

textContent – bezpečně mění textový obsah.
innerHTML – umožňuje vložit HTML, ale může být nebezpečný.
value – pracuje s hodnotami formulářů.
src, alt, href – atributy, které lze číst a měnit.
setAttribute() a getAttribute() – univerzální práce s atributy.
classList – pohodlný nástroj pro manipulaci s CSS třídami.