🌳 Kapitola 1

Co je DOM?

Prohlížeč parsuje HTML a vytvoří z něj stromovou strukturu objektů — Document Object Model. JavaScript pak může tento strom číst a měnit, což způsobuje viditelné změny na stránce.

document
└── html
├── head
│ ├── title "Moje stránka"
│ └── meta charset="UTF-8"
└── body
├── header
│ └── h1 "Nadpis"
├── main
│ └── p#uvod "Text..."
└── footer

Každý uzel stromu je Node — element, text nebo komentář. JS přistupuje k uzlům přes globální objekt document.

🛠️
DevTools → Elements: Otevřete F12 → Elements záložku v prohlížeči. Vidíte živý DOM — kliknutím na element ho zvýrazníte na stránce. V Console záložce pak píšete JS přímo proti aktuální stránce.
Kapitola 1 / 9 Další: Selektory →
🔍 Kapitola 2

Selektory — výběr elementů

Moderní JS používá téměř výhradně querySelector a querySelectorAll — přijímají stejné selektory jako CSS.

// querySelector — vrátí PRVNÍ shodu nebo null
const nadpis   = document.querySelector('h1');
const btn      = document.querySelector('#submit-btn');
const prvniKarta = document.querySelector('.card');
const input    = document.querySelector('input[type="email"]');
const zanoreny = document.querySelector('.nav > a:first-child');

// querySelectorAll — vrátí NodeList (všechny shody)
const vsechnyKarty = document.querySelectorAll('.card');
const odstavce    = document.querySelectorAll('p');

// NodeList → iterace
vsechnyKarty.forEach(karta => karta.classList.add('aktivni'));

// NodeList → Array (pro Array metody)
const pole = Array.from(vsechnyKarty);
// nebo: [...vsechnyKarty]

// Starší metody (stále funkční, méně flexibilní)
document.getElementById('id')           // Element nebo null
document.getElementsByClassName('cls')  // HTMLCollection (živá!)
document.getElementsByTagName('div')    // HTMLCollection
⚠️
querySelector vs getElementById: getElementById je marginálně rychlejší pro výběr podle ID. V praxi je rozdíl zanedbatelný — querySelector je flexibilnější a konzistentní s CSS znalostmi.

🧠 Kvíz: Co vrátí document.querySelector('.btn') pokud na stránce jsou tři elementy s třídou btn?

Kapitola 2 / 9 Další: Čtení & zápis →
✏️ Kapitola 3

Čtení a zápis vlastností elementu

const el = document.querySelector('#muj-element');

// ── OBSAH ──
el.textContent          // čte/zapisuje text (bezpečné, bez HTML)
el.innerHTML            // čte/zapisuje HTML (pozor na XSS!)
el.innerText            // podobné textContent, ale bere v potaz CSS

el.textContent = "Nový text";
el.innerHTML   = "<strong>Tučný text</strong>";

// ── ATRIBUTY ──
el.getAttribute('href')           // čte atribut
el.setAttribute('href', '/nova')  // zapisuje atribut
el.removeAttribute('disabled')    // odebere atribut
el.hasAttribute('hidden')         // boolean

// Zkrácené vlastnosti pro běžné atributy
el.id          // čte/zapisuje id
el.href        // pro 
el.src         // pro ,