Jak funguje DOM a proč na něm záleží
DOM je srdce každé interaktivní stránky. Zjistíš, jak JavaScript mění obsah stránky a reaguje na to, co dělá uživatel.
Co je DOM a proč to zajímá?
Když navštívíš webovou stránku, vidíš text, tlačítka, obrázky. To všechno je obsah. Ale jak se do něj dostane, jak se změní, jak se pohne? To dělá DOM — Document Object Model. Je to v podstatě překladatel mezi tvým kódem a tím, co vidíš na obrazovce.
DOM není JavaScript. Není to ani HTML. Je to most mezi nimi. HTML popisuje strukturu, JavaScript ji mění, a DOM je ten prostředník, který ví jak na to. Když JavaScript řekne “změní barvu tohoto prvku”, DOM to převede na něco, co prohlížeč skutečně provede.
Tady je důležitá věc: bez pochopení DOM budou tvoje skripty pracovat, ale nebudou dělat přesně to, co chceš. Budou pomalé. Budou chybět ti situace, kdy se věci opakovaly zbytečně. Nebudeš vědět, proč někdy něco nefunguje.
Struktura DOM stromu
DOM je organizovaný jako strom. Úplně stejně jako rodina — je tam tatínek (parent), děti (children), sourozenci (siblings). Na samém vrchu je document. Pod ním je element html. Pod tím je head a body. A pod těmi jsou všechny ostatní prvky.
Proč to funguje tímto způsobem? Protože struktura vytváří logiku. Když víš, že div je uvnitř section, která je uvnitř body, můžeš s tím pracovat. Můžeš říci “vezmi všechny divy v tomto sectinu” nebo “změň barvu všem prvkům v tomto kontejneru”.
Konkrétní příklad: Máš web s navigací v header tagu. Ta navigace obsahuje ul (seznam), který obsahuje tři li prvky (položky). Když chceš změnit barvu všech položek navigace, nemusíš měnit každou zvlášť. Řekneš DOM: “vezmi ul v header tagu a změň mu barvu všem li prvkům uvnitř”.
Jak JavaScript manipuluje DOM
Jakmile JavaScript něco “vybere” z DOM, může s tím dělat prakticky cokoliv. Může změnit jeho obsah, jeho vzhled, nebo ho úplně smazat. To vše se stane na obrazovce téměř okamžitě.
Základní operace jsou čtyři: vytvoření (create), čtení (read), změna (update), a smazání (delete). Znáš to jako CRUD. V DOM to znamená: vytvořit nový element, přečíst hodnotu, změnit vlastnost, nebo prvek odstranit.
Nejčastěji budeš používat metody jako querySelector (najdi element), getElementById (najdi podle ID), innerHTML (změň obsah), a addEventListener (poslouchej na kliknutí nebo jiné akce). To jsou základní stavební bloky.
Proč na DOM záleží pro výkon
Tady se dostáváme k věci. DOM manipulace může být pomalá. Velmi pomalá. Pokud nebudeš opatrný, tvůj web bude reagovat pomalu na kliky. Bude se “prohýbat” když se posouvá. Uživatele to nebude bavit.
Problém? Pokaždé když změníš DOM, musí prohlížeč znovu vypočítat, jak vypadá stránka. To se jmenuje reflow. A pak musí znovu nakreslit všechno na obrazovku. To se jmenuje repaint. Dělat to tisíckrát za sekundu tě zpomalí.
Jak to zrychlit:
- Seskupuj změny dohromady. Změň 10 věcí v jedné operaci, ne 10 operacemi.
- Používej event delegation. Místo 100 posluchačů na 100 prvků, jeden posluchač na rodičovský prvek.
- Čti z DOM jen když potřebuješ. Každé čtení je drahé.
- Používej requestAnimationFrame pro animace, ne setInterval.
Praktické příklady
Teorie je fajn, ale zkusme si to. Tady jsou čtyři reálné situace, kde DOM práce chytíš.
Příklad 1: Kliknutí na tlačítko
Máš tlačítko. Když na něj klikneš, měl by se objevit text “Ahoj!”. JavaScript najde tlačítko v DOM, připraví si posluchač na kliknutí, a když k němu dojde, změní obsah prvku vedle tlačítka. To je on — interakce. To je moment, kdy se DOM mění v odpověď na uživatele.
Příklad 2: Dynamický seznam
Máš seznam nákupů. Chceš přidávat položky. Pokaždé když zadáš text a stiskneš Enter, JavaScript vytvoří nový li prvek, přidá ho do ul seznamu, a to se objeví na obrazovce. To je vytváření prvků za běhu.
Příklad 3: Třídy a CSS
CSS třídy jsou nejlepší přátelé DOM. Místo abys měnil jednotlivé vlastnosti (color, background, size), přidáš prvku třídu. Třída už má všechny vlastnosti připravené. JavaScript jen říká “přidej třídu active” a CSS dělá zbytek. To je efektivní.
Příklad 4: Formulář s validací
Když uživatel vyplňuje formulář, JavaScript poslouchá na změny. Když zadá špatný email, DOM se změní — změní se barva inputu, objeví se chybová zpráva. Když to opraví, změní se zase zpět. To všechno je komunikace s DOM.
Nástroje pro práci s DOM
Aby ses neztratil, tady je seznam nejdůležitějších věcí, které budeš potřebovat:
querySelector
Najde PRVNÍ prvek, který odpovídá selektoru. Stejně jako CSS. Nejčastěji používaná metoda.
querySelectorAll
Najde VŠECHNY prvky. Vrátí seznam. Ideální když chceš něco udělat s více prvky najednou.
innerHTML a textContent
innerHTML změňuje obsah včetně HTML tagů. textContent jen text. Používej textContent když je to možné — je to bezpečnější.
addEventListener
Připraví posluchač na akci (kliknutí, pohyb myši, stisknutí klávesy). Bez toho nemůžeš reagovat na uživatele.
classList
Přidává, odebírá, nebo ověřuje třídy. classList.add(), classList.remove(), classList.toggle(). Nejlepší způsob jak pracovat s CSS třídami.
getAttribute a setAttribute
Čte a píše atributy HTML prvků. data-* atributy jsou speciálně užitečné pro ukládání informací.
Klíčové poznatky
DOM je způsob, jak JavaScript mluví se stránkou. Je to překladatel mezi tvým kódem a tím, co vidí uživatel. Když pochopíš DOM, pochopíš jak pracují všechny interaktivní stránky.
Nemusíš si pamatovat všechny metody. Potřebuješ pochopit princip — jak jsou prvky organizované, jak se komunikuje s nimi, co se stane když je změníš. Zbytek je jen hledání v dokumentaci.
Začni s malými věcmi. Vyber si prvek, změň mu text. Přidej třídu. Poslouchej na kliknutí. Pak zkombinuj. Pak zkus dělat složitější věci. DOM se ti otevře postupně, ne najednou.
Další články v sérii
Poznámka o vzdělávacím obsahu
Tento článek je navržen jako vzdělávací materiál. Pokud jsou uvedeny příklady kódu, jsou určeny pro ilustraci a procvičování. Každý web je jiný a specifické řešení bude záviset na tvých požadavcích. V případě problémů nebo nejasností se doporučuje konzultace s komunitou vývojářů nebo oficiální dokumentací.