Zkratka proDocument Object ModelTakéHTML DOM, DOM APIPokročilý
Definice
DOM je programové rozhraní a stromový model dokumentu HTML nebo XML, který prohlížeč vytvoří po načtení stránky a zpřístupní skriptům. Díky DOM mohou skripty číst strukturu, měnit obsah, reagovat na události a synchronizovat vykreslenou stránku se stavem aplikace. DOM proto není jen text souboru, ale živý objektový pohled na dokument.
Nezaměňujte: DOM zde znamená Document Object Model ve webových technologiích, ne doménu ani Depth of Market v tradingu.
Proč DOM není totéž co HTML soubor
DOM vzniká ve chvíli, kdy prohlížeč načte dokument, opraví některé syntaktické nepřesnosti, spojí HTML se stavem parseru a vystaví výsledek jako objekty. Zdrojové HTML je text. DOM je datová struktura v paměti, nad kterou běží JavaScript, CSS selektory, události i část vývojářských nástrojů.
Rozdíl je vidět u dynamických aplikací. Server může poslat prázdný kontejner, například <div id="app"></div>, a JavaScript do něj později vloží formulář, tabulku nebo celý košík. Zobrazená stránka pak obsahuje uzly, které v původní odpovědi serveru vůbec nebyly.
Strom uzlů a objektů v prohlížeči
Document, Element a Text
DOM popisuje dokument jako strom. Kořenem je objekt document, pod ním jsou elementy jako html, body, button nebo input. Text mezi značkami je také uzel, jen jiného typu. Každý uzel má vazby na rodiče, potomky a sourozence, takže skript může najít konkrétní místo a upravit ho.
Živý stav stránky
DOM není jen pasivní reprezentace. Změna vlastnosti textContent, přidání třídy přes classList nebo vložení nového elementu metodou append mění aktuální stránku. Prohlížeč poté podle potřeby přepočítá styly, rozložení a vykreslení. Cena operace proto nezávisí jen na řádku JavaScriptu, ale i na dopadu do layoutu.
Události jako vstup do DOM
Uživatelská akce vstupuje do stránky přes události. Kliknutí, odeslání formuláře, stisk klávesy nebo dokončení načtení vytvoří objekt události a prohlížeč ho předá registrovaným posluchačům. Mechanismus probublávání dovoluje zachytit akci na nadřazeném elementu, což se používá třeba u seznamů, jejichž položky vznikají až později.
DOM tím propojuje dokument s chováním aplikace. Tlačítko samo o sobě je značka, ale posluchač na události click z něj udělá ovládací prvek. Formulář je struktura polí, ale práce s událostí submit rozhodne, zda se data odešlou, zvalidují nebo zobrazí jako chyba.
Kde DOM naráží na výkon a bezpečnost
Časté čtení a zapisování do DOM může brzdit složité rozhraní, hlavně když změny nutí prohlížeč opakovaně počítat velikosti a pozice. Běžná optimalizace spojuje více úprav do jedné dávky, používá fragmenty dokumentu nebo nechává knihovnu řídit pořadí změn.
Bezpečnostní riziko vzniká při vkládání nedůvěryhodného textu jako HTML. Vlastnost innerHTML interpretuje značky, takže špatně ošetřený vstup může otevřít prostor pro XSS. Vložení přes textContent zachová text jako text a je pro běžné výpisy bezpečnější volba.
Příklady z praxe
Počítadlo košíku bez reloadu
E-shop má tlačítko pro přidání zboží do košíku a vedle něj číslo s počtem položek. JavaScript najde oba elementy v DOM a po kliknutí změní text bez načtení nové stránky. Uživatel okamžitě vidí nový stav košíku.
const button = document.querySelector('#add'); const output = document.querySelector('#count'); let count = 0; button.addEventListener('click', () => { count += 1; output.textContent = count; });Bezpečný výpis komentáře
Diskuze zobrazuje komentář od návštěvníka, který může obsahovat znaky vypadající jako HTML. Vložení přes textContent zobrazí obsah jako obyčejný text. Vložení stejné hodnoty přes innerHTML by prohlížeči dovolilo značky interpretovat.
const comment = '<img src=x onerror=alert(1)>Dobrý den'; // Bezpečnější pro prostý text: document.querySelector('#comment').textContent = comment; // Rizikové pro nedůvěryhodný vstup: // document.querySelector('#comment').innerHTML = comment;
Časté omyly
- MýtusDOM je prostě HTML kód stránky.
- Ve skutečnostiDOM je objektový strom vytvořený z dokumentu a průběžně měněný prohlížečem nebo skripty. HTML je textový vstup, zatímco DOM je aktuální reprezentace v paměti.
- MýtusKdyž změním DOM, změnil jsem HTML soubor na serveru.
- Ve skutečnostiZměna DOM se děje lokálně v běžící stránce. Serverový soubor nebo databáze se změní jen po samostatném uložení přes síťový požadavek.
Časté dotazy
- Proč se DOM v DevTools liší od volby Zobrazit zdroj stránky?
- DOM v DevTools ukazuje aktuální strom dokumentu po parsování a po změnách provedených skripty. Zdroj stránky obvykle zobrazuje původní HTML odpověď ze serveru. Rozdíl vznikne například tehdy, když framework doplní komponenty až v prohlížeči, reklama vloží další prvky nebo skript přidá chybové hlášení do formuláře.
- Mění změna DOM data na serveru?
- Změna DOM upravuje dokument v paměti prohlížeče, nikoli soubor nebo databázi na serveru. Server se dozví o změně jen tehdy, když aplikace odešle požadavek, například přes formulář, fetch nebo WebSocket. Po obnovení stránky se DOM obvykle znovu vytvoří z nové odpovědi serveru a z běžících skriptů.
- Kdy je přímá práce s DOM vhodnější než framework?
- Přímá práce s DOM dává smysl u malé interakce, jednoduchého widgetu nebo stránky bez složitého stavu. Přidání třídy, přepnutí textu nebo obsluha jednoho formuláře často nepotřebuje celý framework. Framework začne dávat větší smysl ve chvíli, kdy se mnoho částí rozhraní odvozuje ze společného stavu a ruční synchronizace by byla křehká.
- Proč může častá manipulace s DOM zpomalit stránku?
- Manipulace s DOM může zpomalit stránku, protože některé změny vyvolají přepočet stylů, rozložení prvků a překreslení. Samotný zápis vlastnosti v JavaScriptu může být levný, ale následná práce vykreslovacího jádra drahá. Problém bývá hlavně u velkých tabulek, seznamů, animací a opakovaného střídání čtení rozměrů se zápisem změn.
Zdroje
- DOM Standard(otevře se v novém okně)
- HTML Standard(otevře se v novém okně)
- Document Object Model (DOM)(otevře se v novém okně)
- Document Object Model (DOM)(otevře se v novém okně)
Související pojmy
