AndreaHTML kód kterým vytváříme webové stránky je na první pohled úplně jiný než JavaScript, avšak v JavaScriptu můžete s HTML také pracovat a nebo i vytvořit stránku "bez HTML". Jak je to možné? Při zpracování webové stránky v prohlížeči dochází k převodu zdrojového kódu stránky HTML do stromové struktury v paměti, která se nazývá Document Object Model (DOM). Tento strom je složený z objektů odpovídajících jednotlivým elementům, textům a komentářům v tomto dokumentu.
HTML, XHTML a XML je tedy jen předpis pro vytvoření DOM a DOM API je pak rozhraní, které umožňuje programátorům přistupovat a manipulovat s prvky na webové stránce či v dokumenty. DOM je nezávislý na platformě, jazyku a každý, kdo pracuje s webovými stránkami zná jeho důležitost.
Předpoklady, než začnete
Nejprve byste se měli seznámit s HTML a CSS. Je důležité znát aspoň základní syntaxi a strukturu HTML a vědět aspoň trochu, jak se používá CSS k úpravě vzhledu stránky.
Poté byste se měli naučit základy JavaScriptu. Je důležité mít základy v programování a věděli jak se volají metody a funkce, protože při práci s DOM se volání metod a členských proměnných nevyhnete. Také je třeba vědět co jsou to reference a jak se ukládají objekty v Javascriptu do paměti.
Jak se učit DOM?
Začátečníci mají často problém chápat už samotnou stromovou strukturu dokumentu DOM. Pokud jste nikdy neslyšeli o grafech, doporučujeme si přečíst pár kapitol o teorii grafů.
Struktura DOM se skládá z objektů Node z nichž část reprezentuje elementy (např. v HTML odstavec, obrázek, formulář) a ty jsou uspořádány do stromové struktury. O Node prvních v DOM si můžete přečíst zde. V JS můžete manipulovat s těmito elementy, například přidávat, odebírat nové nebo měnit jejich obsah či atributy.
Po získání těchto základních předpokladů se můžete zaměřit na práci se samotným DOM API.
Můžete začít tím, že se naučíte získávat přístup k jednotlivým elementů pomocí metod jako querySelector, getElementsByTagName a getElementById.
Můžete také začít zkoumat různé metody pro úpravu obsahu a vlastností prvků.
Pro změnu atributu prvku můžete použít vlastnost setAttribute.
Je důležité si uvědomit, že použitím těchto vlastností můžete přepsat celý obsah nebo atribut prvku, takže je třeba používat s opatrností.
Události
Po naučení se základních metod DOM API byste se měli naučit pracovat s událostmi (Eventy). Eventy jsou akce, které se vyskytují v průběhu načítání nebo interakce s webovou stránkou. Například událost click se vyskytuje, když uživatel klikne na prvek. Pro začátečníky může být obtížné pochopit, jak přidávat event listenery (sledovače událostí) a jak reagovat na události a vytvářet callbacky.
Tak jako se vším, co se člověk snaží naučit je dobré si vyhradit potřebný čas a mít trpělivost. Je vhodné začít s jednoduššími úlohami a postupně se zlepšovat a získávat zkušenosti.
