V druhé lekci se podíváme na základy manipulace s obsahem webu, co je to querySelector() a jak pomocí JS vložit obsah do stránky.
Tady máš odkaz k materiálům pro tuto lekci: czchts-js-2
Jedná se o reprezentaci HTML pomocí JavaScriptových objektů, kde každý element má svůj vlastní objekt (co je to objekt, si povíme v jedné z následujících lekcí). Díky tomu můžeme jednoduše přistupovat k obsahu našeho webu a měnit ho. DOM (HTML kód) celé stránky se ukrývá v objektu document, kde je mimo jiné i metoda querySelector(). Pokud si v prohlížeči zapneme DevTools, tak HTML struktura stránky, kterou tam vidíme, je právě onen DOM, který se i dynamicky aktualizuje.
querySelector()
Je metoda (funkce) document objektu. Jako argument bere CSS selektor v podobě textového řetězce, pomocí kterého pak najde první element v našem DOMu, který selektoru odpovídá. Dokáže hledat podle jakéhokoliv CSS selektoru (třída, id, atribut, kombinátory).
Je důležité mít na paměti, že querySelector() nám nevrací přímo HTML element, ale jeho objektovou reprezentaci. Tento objekt má spoustu vlastností, které můžeme přepisovat a manipulovat tak s obsahem webu.
Takže ve výsledku bude náš DOM vypadat takhle:
Díky objektové reprezentaci můžeme elementům přidávat také CSS styly pomocí vlastnosti style, kde najdeme sadu vlastností odpovídajících těm z CSS. Jediný rozdíl je, že víceslovné názvy CSS vlastností vypadají v JS trošku jinak. Slova se neoddělují pomocí "-", ale používá se tzv. "Camel case" - stejně jako u názvů proměnných.
Důležité je taky mít na mysli, že takto přidané styly jsou inline styly. To znamená, že jdou přímo jako style atribut elementu a nepřepisují ani nic nepřidávají do našeho CSS. Díky tomuto mají také nejvyšší specificitu (přepíše je už jen styl s !important).
Náš DOM bude po přídání stylu vypadat takto:
Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.