DOM strom

Páteří každého HTML dokumentu jsou značky neboli tagy.

Podle DOMu (Document Object Model) je každá HTML značka objekt. Vnořené značky jsou „dětmi“ vnějších. Text uvnitř značky je také objekt.

Všechny tyto objekty jsou v JavaScriptu dostupné a my můžeme s jejich pomocí měnit stránku.

Například document.body je objekt, který pÅ™edstavuje značku <body>.

Po spuÅ¡tÄ›ní tohoto kódu <body> na 3 sekundy zmÄ›ní barvu na červenou:

document.body.style.background = 'red'; // změní barvu pozadí na červenou

setTimeout(() => document.body.style.background = '', 3000); // vrátí ji zpět

Zde jsme použili style.background, abychom zmÄ›nili barvu pozadí document.body, ale existuje mnoho dalších vlastností, například:

• innerHTML – HTML obsah uzlu,
• offsetWidth – šířka uzlu (v pixelech),
• …a tak dále.

Brzy se naučíme další způsoby, jak manipulovat s DOMem, ale nejprve musíme poznat jeho strukturu.

Příklad DOMu

Začněme s následujícím jednoduchým dokumentem:

<!DOCTYPE HTML>
<html>
<head>
  <title>O losovi</title>
</head>
<body>
  Pravda o losovi.
</body>
</html>

DOM reprezentuje HTML v podobě stromové struktury značek. Vypadá následovně:

Na uvedeném obrázku můžete klikat na elementové uzly a jejich děti se budou rozbalovat a schovávat.

Každý uzel stromu je objektem.

Značky jsou elementové uzly (nebo jen elementy) a tvoří strukturu stromu: jeho koÅ™enem je <html>, jeho dÄ›tmi jsou <head> a <body>, a tak dále.

Text uvnitÅ™ elementů tvoří textové uzly, označené jako #text. Textový uzel obsahuje pouze Å™etÄ›zec. Nesmí mít dÄ›ti a je vždy listem stromu.

Například značka <title> obsahuje text "O losovi".

Prosíme, všimněte si těchto zvláštních znaků v textových uzlech:

• konec řádku: ↵ (v JavaScriptu znám jako \n)
• mezera: ␣

Mezery a konce řádků jsou zcela platnými znaky, tak jako písmena a číslice. Tvoří textové uzly a stávají se součástí DOMu. Například v uvedeném příkladu značka <head> obsahuje pÅ™ed <title> nÄ›kolik mezer, které se staly uzlem #text (který obsahuje pouze znak konce řádku a nÄ›kolik mezer).

Existují jen dvě výjimky na nejvyšší úrovni:

1. Mezery a konce řádků pÅ™ed <head> se z historických důvodů ignorují.
2. Jestliže vložíme nÄ›co za </body>, bude to automaticky pÅ™emístÄ›no dovnitÅ™ body na konec, jelikož specifikace HTML vyžaduje, aby vÅ¡echen obsah byl uvnitÅ™ <body>. Za </body> tedy nemohou být žádné mezery.

V ostatních případech je všechno jasné – jestliže jsou v dokumentu mezery (stejně jako kterýkoli jiný znak), stanou se v DOMu textovými uzly, a pokud je odstraníme, nebudou tam.

Zde nejsou žádné textové uzly, které by obsahovaly jen mezery:

<!DOCTYPE HTML>
<html><head><title>O losovi</title></head><body>Pravda o losovi.</body></html>

Automatické opravy

Jestliže prohlížeč narazí na poškozený HTML kód, při vytváření DOMu jej automaticky opraví.

Například nejvyšší značka bude vždy <html>. I kdyby v dokumentu nebyla, bude v DOMu vždy existovat, protože prohlížeč ji vytvoří. Totéž platí pro <body>.

Například jestliže je HTML soubor tvoÅ™en jediným slovem "Ahoj", pak jej prohlížeč zabalí do <html> a <body>, pÅ™idá požadovanou značku <head> a DOM bude vypadat následovnÄ›:

Prohlížeče při generování DOMu automaticky zpracují chyby v dokumentu, uzavřou značky a podobně.

Dokument s neuzavřenými značkami:

<p>Ahoj
<li>mami
<li>a
<li>tati

…se stane normálním DOMem, jelikož prohlížeč načte značky a obnoví chybějící části:

<table id="tabulka"><tr><td>1</td></tr></table>

Ostatní typy uzlů

Existují i jiné typy uzlů, než elementové a textové.

Například komentáře:

<!DOCTYPE HTML>
<html>
<body>
  Pravda o losovi.
  <ol>
    <li>Los je elegantní</li>
    <!-- komentář -->
    <li>...a mazané zvíře!</li>
  </ol>
</body>
</html>

Tady vidíme mezi dvÄ›ma textovými uzly nový typ stromového uzlu – komentářový uzel, označený jako #comment.

Může nás napadnout – proč se vlastně do DOMu přidává komentář? Ten přece nemá na vzhled stránky žádný vliv. Existuje však pravidlo – jestliže je něco v HTML, musí to být i v DOM stromu.

Vše v HTML, včetně komentářů, se stává součástí DOMu.

Dokonce i direktiva <!DOCTYPE...> na samém začátku HTML je DOM uzlem. V DOM stromu se nachází tÄ›snÄ› pÅ™ed <html>. O tom ví jen málokdo. Nebudeme na tento uzel sahat, nebudeme jej ani kreslit v diagramech, ale je tam.

Objekt document, který pÅ™edstavuje celý dokument, je formálnÄ› také DOM uzlem.

Celkem existuje 12 typů uzlů. V praxi obvykle pracujeme se čtyřmi z nich:

1. document – „vstupní bod“ DOMu.
2. elementové uzly – HTML značky, stavební kameny stromu.
3. textové uzly – obsahují text.
4. komentáře – někdy do nich můžeme vkládat informace, které se nezobrazí, ale JS je může z DOMu načíst.

Podívejte se sami

Chcete-li vidět strukturu DOMu v reálném čase, zkuste Live DOM Viewer. Stačí psát do dokumentu a ten se za okamžik zobrazí jako DOM.

Dalším způsobem, jak prozkoumávat DOM, je používat prohlížečové vývojářské nástroje. Právě ty používáme při programování.

Abyste tak učinili, otevřete si webovou stránku elk.html, zapněte si prohlížečové vývojářské nástroje a přepněte se na záložku Elements (Prvky).

Měla by vypadat přibližně takto:

Vidíte DOM, klikáte na elementy, vidíte jejich detaily a podobně.

Prosíme všimněte si, že struktura DOMu ve vývojářských nástrojích je zjednodušená. Textové uzly jsou zobrazeny pouze jako text. A „prázdné“ textové uzly (obsahující jen mezery) nejsou zobrazeny vůbec. To je dobře, neboť ve většině případů nás zajímají pouze elementové uzly.

Po kliknutí na tlačítko v levém horním rohu si můžeme zvolit uzel z webové stránky myší (nebo jiným ukazovacím zařízením) a „prozkoumat“ jej (záložka Elements se na něj posune). To funguje skvěle, když máme obrovskou HTML stránku (a odpovídající obrovský DOM) a chceme se podívat na umístění určitého jejího elementu.

Další způsob, jak to udělat, je kliknout pravým tlačítkem na webovou stránku a v kontextovém menu zvolit „Prozkoumat“ („Inspect“).

V pravé části nástrojů se nacházejí následující podzáložky:

• Styles (Styly) – můžeme vidÄ›t CSS aplikované na aktuální element, jedno pravidlo po druhém, včetnÄ› vestavÄ›ných pravidel (Å¡edÄ› zobrazených). Téměř vÅ¡echno můžeme na místÄ› editovat, včetnÄ› rozmÄ›rů a vnÄ›jších i vnitÅ™ních okrajů boxu.
• Computed (Vypočteno) – vidíme CSS aplikované na element podle vlastností: pro každou vlastnost vidíme pravidlo, které ji definuje (včetnÄ› CSS dÄ›dičnosti a podobnÄ›).
• Event Listeners (Posluchače událostí) – vidíme posluchače událostí pÅ™ipojené k DOM elementům (probereme je v příští části tutoriálu).
• …a tak dále.

Nejlepší způsob, jak je prostudovat, je klikat kolem dokola. Většinu hodnot lze na místě editovat.

Interakce s konzolí

Při práci s DOMem na něj můžeme také chtít aplikovat JavaScript. Například můžeme chtít načíst uzel a spustit nějaký kód, který ho modifikuje, abychom viděli výsledek. Poskytneme několik rad, jak cestovat mezi záložkou Elements a konzolí.

Pro začátek:

1. Na záložce Elements zvolte první značku <li>.
2. Stiskněte Esc – přímo pod záložkou Elements se otevře konzole.

Nyní je poslední zvolený element k dispozici jako $0, pÅ™edposlední zvolený jako $1, a tak dále.

Můžeme na nich spouÅ¡tÄ›t příkazy. Například $0.style.background = 'red' obarví zvolený prvek seznamu červenÄ›, takto:

Tímto způsobem tedy získáme uzel ze záložky Elements v konzoli.

Existuje i opačná cesta. Jestliže se nÄ›jaká promÄ›nná odkazuje na DOM uzel, můžeme v konzoli použít příkaz inspect(uzel), abychom jej vidÄ›li v záložce Elements.

Nebo si prostÄ› můžeme vypsat DOM uzel v konzoli a prozkoumat jej „na místě“, například document.body následovnÄ›:

To samozřejmě slouží pro účely ladění. Od následující kapitoly budeme k DOMu přistupovat a modifikovat jej pomocí JavaScriptu.

Prohlížečové vývojářské nástroje představují při vývoji značnou pomoc: můžeme prozkoumávat DOM, zkoušet různé věci a vidíme, co se pokazilo.

Shrnutí

HTML/XML dokument je v prohlížeči reprezentován DOM stromem.

• Značky se stávají elementovými uzly a tvoří jeho strukturu.
• Text se stává textovými uzly.
• …atd., vÅ¡e, co je v HTML, včetnÄ› komentářů, má v DOMu své místo.

Pomocí vývojářských nástrojů můžeme DOM prozkoumávat a ručně jej měnit.

V této kapitole jsme uvedli základy, nejpoužívanější a nejdůležitější akce, s kterými začneme. Rozsáhlá dokumentace vývojářských nástrojů Chrome (Chrome Developer Tools) se nachází na https://developers.google.com/web/tools/chrome-devtools. Nejlepší způsob, jak se naučit nástroje používat, je klikat sem a tam a číst menu: většina možností je zřejmá. Až je budete později obecně znát, přečtěte si dokumentaci a naučte se zbytek.

DOM uzly obsahují vlastnosti a metody, které nám umožňují mezi nimi cestovat, měnit je, přesunovat je na stránce a podobně. Dostaneme se k nim v dalších kapitolách.