JavaScript - lekce 2

Podklady pro tuto lekci si stáhni zde. Stažený ZIP rozbal u sebe na počítači a složku otevři v editoru VS Code.

DOM - Document Object Model

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

<!--HTML-->
<ul class="seznam">
   <li class="polozka-seznamu">Prvni polozka</li>
    <li class="polozka-seznamu">
     <a href="odkaz-pryc">Odkaz</a>
    </li>
  <li class="polozka-seznamu">Posledni polozka</li>
</ul>

// JavaScript
// Vrátí nám objekt elementu <ul class="seznam">
document.querySelector(".seznam");

// Vrátí objekt poslední položky seznamu
document.querySelector(".polozka-seznamu:last-child");

// Vrátí objekt prvního <a> elementu který má hodnotu href atributu začínající na "odkaz"
document.querySelector("a[href^=odkaz]");

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.

<!--HTML-->
<div class="blok">
   JavaScript
</div>
<img src="logo.svg">
// JavaScript

// Uložíme si naše získané elementy do proměnných
let blok = document.querySelector(".blok");
let obrazek = document.querySelector(".logo");

// Přepíšeme text v našem bloku
blok.textContent = "Učím se JS s Czechitas";

// Změníme cestu našemu obrazku
obrazek.src = "./obrazky/czechitas-logo.svg";

Takže ve výsledku bude náš DOM vypadat takhle:

<div class="blok">
   Učím se JS s Czechitas
</div>
<img src="./obrazky/czechitas-logo.svg">

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.

• margin -> margin
• text-align -> textAlign
• border-left-width -> borderLeftWidth

<!--HTML-->
<div class="blok">
   Učím se JS s Czechitas
</div>

// JavaScript
let blok = document.querySelector(".blok");
blok.style.textDecoration = "underline";

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:

<div class="blok" style="text-decoration: underline;">
   Učím se JS s Czechitas
</div>

Kontrolní otázky

1. Pomocí čeho reprezentujeme HTML elementy v DOMu?
2. Kde najdeme DOM naší stránky (na jakém objektu)?
3. Jaký je rozdíl v zápisu CSS vlastností mezi CSS a JS, a proč to tak je?
4. Jakým způsobem přidává JavaScript CSS styly do stránky?
5. Když budeme mít více stejných elementů na stránce, který z nich najde querySelector()?

‍