Ú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

  1. 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.

  2. 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.

  3. 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).

  4. 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.