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.