Slovník pojmů

DOM

DOM je strom dokumentu uvnitř prohlížeče. Dává JavaScriptu způsob, jak najít správný element, reagovat na událost a bezpečně změnit konkrétní část rozhraní, aniž by se z něj stala nekontrolovaná směs HTML řetězců.

Stručná definice

Strom uzlů mezi HTML dokumentem a interaktivním rozhraním.

Prohlížeč při načtení HTML vytváří objektový model dokumentu. Obsahuje dokument, elementy, textové uzly a atributy uspořádané do vztahů rodič, potomek a sourozenec. Element tlačítka, nadpis nebo odstavec tak není pro skript jen kus textu, ale konkrétní uzel, jehož obsah, atributy a události lze řízeně číst nebo měnit.

DOM není samotný HTML zdrojový soubor ani vizuální snímek stránky. Browser opravuje některé neúplné struktury podle pravidel HTML parseru a JavaScript může strom následně doplnit, odstranit nebo přeuspořádat. CSS potom určuje, jak se tyto prvky vykreslí; vizuální pořadí může být jiné než pořadí v DOM. Změna v DOM se navíc sama neukládá do databáze ani neposílá na server.

Jaký problém řeší

Umožňuje přesnou a řízenou interakci se stránkou

DOM dává aplikaci model, na němž může měnit stav rozhraní, obsloužit formulář nebo reagovat na data z API.

vyhledání konkrétního tlačítka, formulářového pole nebo informační oblasti
reakce na kliknutí, změnu hodnoty, odeslání formuláře nebo klávesovou událost
bezpečné nastavení textu, atributu a stavu existujícího elementu
přidání nebo odebrání položky košíku, chyby validace či stavu načítání
práce frontendového frameworku, který změny DOM obvykle koordinuje nad vlastním stavem

Praktický příklad

Aktualizace dostupnosti produktu bez vkládání nedůvěryhodného HTML

Po kliknutí na tlačítko skript načte stav skladu z API. Vybere existující element přes data atribut a aktualizuje jeho text. Serverová odpověď není přebírána jako hotové HTML, proto její text nemůže tímto krokem vytvořit nový skript nebo nečekaný element v dokumentu.

Ukázka řeší pouze klientské zobrazení. API musí data validovat a aplikace musí samostatně rozhodnout, kdo má právo vidět nebo měnit skladové informace. V reálné aplikaci je vhodné doplnit také stav načítání, timeout a srozumitelný chybový stav.

JavaScript

const button = document.querySelector('[data-stock-check]');
const result = document.querySelector('[data-stock-result]');

button?.addEventListener('click', async () => {
  const response = await fetch('/api/products/123/availability');
  if (!response.ok) throw new Error('Dostupnost nelze načíst.');

  const data = await response.json();
  result.textContent = data.inStock ? 'Skladem' : 'Momentálně není skladem';
});

Jak funguje

Od HTML k bezpečné změně konkrétního uzlu

Textový diagram: HTML → parser prohlížeče → DOM strom → událost a JavaScript → změna elementu → nové vykreslení.

Prohlížeč parsuje HTML Z odpovědi vytvoří dokument se stromem uzlů. Pravidla parseru mohou výsledek upravit oproti neplatnému nebo neúplnému zdrojovému zápisu.
Vzniknou vztahy ve stromu Elementy mají rodiče, potomky a sourozence; text i atributy jsou součástí modelu dokumentu.
JavaScript vybere cíl Selektor nebo uložená reference najde konkrétní element. Selektor má vyjadřovat význam, ne náhodnou vizuální pozici.
Událost nebo data změní stav Handler může nastavit text, hodnotu pole, bezpečný atribut či třídu odpovídající stavu rozhraní.
Prohlížeč upraví zobrazení Podle DOM a CSS přepočítá nezbytné části vykreslení. Změna zůstává lokální, dokud aplikace výslovně nepošle data na server.

Důležité souvislosti

Uzly, události a stav mají vlastní odpovědnosti.

Pochopení stromu pomáhá napsat jednodušší a přístupnější interakce než ruční skládání velkých bloků HTML.

Element, text a atribut

Element reprezentuje například button nebo p, textový uzel jeho obsah a atribut doplňuje vlastnost jako aria-expanded či disabled. Každá změna má zohlednit význam prvku.

Rodič, potomek a sourozenec

Stromová struktura určuje, kde element žije. Pomáhá vybrat správný cíl a pochopit, proč se událost může šířit přes předky.

Události

Kliknutí, odeslání formuláře nebo změna pole mohou spustit handler. Správný návrh řeší i klávesnici, focus a nativní výchozí chování.

DOM a vykreslení

CSSOM a další interní struktury se podílejí na výsledném zobrazení. Zasunutý nebo vizuálně přesunutý prvek může být stále v DOM a přístupnostním stromu.

Bezpečné API

Pro běžný text je vhodné textContent, pro atributy konkrétní bezpečný postup a pro povolené HTML promyšlená sanitizace. Neověřený řetězec nemá být bez dalšího interpretován jako HTML.

Vztah k podobným pojmům

DOM není zdrojový dokument, styl ani uložená data.

Záměna těchto vrstev vede k chybám v bezpečnosti, přístupnosti i očekáváních uživatele.

HTML: Je značkovací dokument a jeho sémantika. DOM je runtime model, který prohlížeč z HTML vytvoří a který se může změnit.
CSS: Řídí prezentaci. Dokáže změnit vizuální pořadí nebo skrýt prvek, ale nemění automaticky sémantický a stromový význam dokumentu.
JavaScript: Je jazyk, kterým lze s DOM pracovat. DOM je browserové API, ne součást samotného standardu jazyka v každém runtime.
Databáze a API: DOM drží klientský pohled na data. Trvalou změnu objednávky nebo skladu musí potvrdit serverová aplikace a její databáze.

Výhody a omezení

Přímá práce s rozhraním vyžaduje disciplinu.

Přínosy

přesná a postupná změna konkrétní části stránky bez plného reloadu
nativní události, formuláře a focus dostupné napříč browsery
stromová struktura, která podporuje sémantické HTML a přístupnost
možnost reagovat na síťová data a zobrazit stav načítání či chyby

Rizika a časté chyby

vkládat nedůvěryhodný řetězec jako HTML a otevřít XSS
měnit velké části stromu příliš často a zhoršit výkon i stabilitu focusu
použít vizuální pořadí jako náhradu logického pořadí v dokumentu
považovat klientskou změnu za potvrzené uložení na serveru
zapomenout, že skrytý prvek může stále ovlivňovat asistivní technologie nebo tabulátorové pořadí

Kdy s DOM pracovat

Když interakce přidává hodnotu nad funkčním HTML základem.

Přímá práce s DOM dává smysl pro malé interakce: rozbalení nápovědy, bezpečnou aktualizaci dostupnosti, řízení focusu v dialogu nebo zobrazení validační chyby. Velké aplikace mohou používat framework, který aktualizace DOM organizuje za vývojáře. I pak ale vývojář potřebuje rozumět skutečnému stromu, událostem a sémantice výsledného HTML.

Ne každý stav musí řešit JavaScript. Navigace a odeslání formuláře mají často přirozenou HTML a HTTP cestu. Rozhraní je odolnější, pokud dokáže základní úlohu dokončit i při chybě skriptu a JavaScript používá jako vylepšení, ne jako důvod, proč se ztratí obsah nebo ovládání.

Na co myslet

Měnit konkrétní prvek, zachovat význam a nepřenášet důvěru z klienta.

Bezpečná a přístupná práce s DOM je součástí běžného frontendového návrhu.

vycházet ze sémantického HTML a nativních ovládacích prvků místo klikacích imitací
pro textová data používat bezpečné textové API a pro povolené HTML jasně určenou sanitizaci
po změně ověřit focus, klávesovou navigaci, oznamování chyb a stav ovládacích prvků
omezit rozsah změn a měřit výkon u dlouhých seznamů nebo častých aktualizací
posílat trvalé změny na server a na odpověď reagovat tak, aby UI nepředstíralo úspěch

Časté otázky

DOM bez častých záměn

Je DOM stejné jako HTML?

Ne. HTML je přenesený dokument, DOM je objektový strom vytvořený prohlížečem. Parser a JavaScript mohou způsobit, že se DOM od původního zdroje liší.

Uloží změna DOM data do databáze?

Ne. Změní jen aktuální stav v prohlížeči. Trvalá změna vyžaduje požadavek na server a jeho úspěšné zpracování.

Proč nevkládat text z API jako HTML?

Pokud data nejsou přísně kontrolovaná a bezpečně sanitizovaná, může interpretace jako HTML spustit nebo vložit nečekaný obsah. Pro běžný text je bezpečnější nastavit textový obsah.

Je DOM jen pro JavaScript?

DOM je standardní objektový model dokumentu v prohlížeči; JavaScript je nejběžnější jazyk, kterým s ním webová aplikace pracuje. Přístupné HTML a CSS jsou důležité i bez vlastního skriptu.

Jak stavím uživatelské rozhraní v praxi

Interakce stavím na sémantickém HTML a bezpečném propojení s API.

Při vývoji aplikací řeším client-side stav společně s přístupností, chybovými scénáři a backendovou kontrolou dat.

Jak navrhuji architekturu aplikací Nezávazně probrat projekt