logo

strom DOM

Páteří dokumentu HTML jsou značky.

Podle modelu DOM (Document Object Model) je každá značka HTML objekt. Vnořené štítky jsou „dětmi“ přiloženého štítku. Text uvnitř značky je také objekt.

Všechny tyto objekty jsou přístupné pomocí JavaScriptu a můžeme je použít k úpravě stránky.

Například document.body je objekt představující <body> tag.

Spuštěním tohoto kódu vytvoříte <body> červená po dobu 3 sekund:

document.body.style.background = 'red'; // make the background red

setTimeout(() => document.body.style.background = '', 3000); // return back

Zde jsme použili style.background pro změnu barvy 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 DOM, ale nejprve musíme vědět o jeho struktuře.

Příklad modelu DOM

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

<!DOCTYPE HTML>
<html>
<head>
 <title>About elk</title>
</head>
<body>
 The truth about elk.
</body>
</html>

DOM představuje HTML jako stromovou strukturu značek. Takto to vypadá:

Na obrázku výše můžete kliknout na uzly prvků a jejich potomci se otevřou/sbalí.

Každý uzel stromu je objekt.

Značky jsou uzly prvků (nebo jen prvky) a tvoří stromovou strukturu:<html> je v kořenovém adresáři, pak <head> a <body> jsou její děti atd.

Text uvnitř prvků tvoří textové uzly , označené jako #text . Textový uzel obsahuje pouze řetězec. Nemusí mít děti a je vždy listem stromu.

Například <title> tag má text "About elk" .

Všimněte si prosím speciálních znaků v textových uzlech:

  • nový řádek:↵ (v JavaScriptu známé jako \n )
  • mezera:␣

Mezery a nové řádky jsou zcela platné znaky, jako jsou písmena a číslice. Tvoří textové uzly a stávají se součástí DOM. Tak například v příkladu výše <head> tag obsahuje několik mezer před <title> a tento text se změní na #text uzel (obsahuje pouze nový řádek a některé mezery).

Existují pouze dvě vyloučení nejvyšší úrovně:

  1. Mezery a nové řádky před <head> jsou z historických důvodů ignorovány.
  2. Pokud něco vložíme za </body> , pak se automaticky přesune do body , na konci, protože specifikace HTML vyžaduje, aby veškerý obsah byl uvnitř <body> . Za </body> tedy nemohou být žádné mezery .

V jiných případech je vše jednoduché – pokud jsou v dokumentu mezery (stejně jako jakýkoli znak), stanou se textovými uzly v DOM, a pokud je odstraníme, nebudou žádné.

Zde nejsou žádné textové uzly obsahující pouze mezery:

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>
Mezery na začátku/konci řetězce a textové uzly obsahující pouze mezery jsou obvykle v nástrojích skryté

Prohlížečové nástroje (brzy se budeme zabývat), které pracují s DOM, obvykle nezobrazují mezery na začátku/konci textu a prázdné textové uzly (zalomení řádků) mezi značkami.

Vývojářské nástroje tímto způsobem šetří místo na obrazovce.

Na dalších obrázcích DOM je někdy vynecháme, pokud nejsou relevantní. Takové mezery obvykle neovlivňují způsob zobrazení dokumentu.

Automatická oprava

Pokud prohlížeč narazí na chybně formátovaný HTML, automaticky jej opraví při vytváření DOM.

Například horní značka je vždy <html> . I když v dokumentu neexistuje, bude existovat v DOM, protože jej vytvoří prohlížeč. Totéž platí pro <body> .

Například pokud je soubor HTML jedno slovo "Hello" , prohlížeč jej zabalí do <html> a <body> a přidejte požadovaný <head> a DOM bude:

Při generování DOM prohlížeče automaticky zpracovávají chyby v dokumentu, uzavírají tagy a tak dále.

Dokument s neuzavřenými značkami:

<p>Hello
<li>Mom
<li>and
<li>Dad

…se stane normálním DOM, když prohlížeč čte značky a obnovuje chybějící části:

Tabulky mají vždy <tbody>

Zajímavým „zvláštním případem“ jsou tabulky. Podle specifikace DOM musí mít <tbody> tag, ale HTML text ho může vynechat. Poté prohlížeč vytvoří <tbody> v DOM automaticky.

Pro HTML:

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

Struktura DOM bude:

Vidíš? <tbody> se objevil z ničeho nic. Při práci s tabulkami bychom to měli mít na paměti, abychom se vyhnuli překvapením.

Další typy uzlů

Kromě prvků a textových uzlů existují některé další typy uzlů.

Například komentáře:

<!DOCTYPE HTML>
<html>
<body>
 The truth about elk.
 <ol>
 <li>An elk is a smart</li>
 <!-- comment -->
 <li>...and cunning animal!</li>
 </ol>
</body>
</html>

Můžeme zde vidět nový typ uzlu stromu – komentář , označený jako #comment , mezi dvěma textovými uzly.

Můžeme si myslet – proč se do DOM přidává komentář? Žádným způsobem to neovlivňuje vizuální reprezentaci. Existuje však pravidlo – pokud je něco v HTML, musí to být také ve stromu DOM.

Vše v HTML, dokonce i komentáře, se stává součástí DOM.

Dokonce i <!DOCTYPE...> direktiva na samém začátku HTML je také uzel DOM. Nachází se ve stromu DOM těsně před <html> . Málokdo o tom ví. Tohoto uzlu se nedotkneme, ani ho nekreslíme do diagramů, ale je tam.

document objekt, který reprezentuje celý dokument, je formálně také uzel DOM.

Existuje 12 typů uzlů. V praxi obvykle pracujeme se 4 z nich:

  1. document – „vstupní bod“ do DOM.
  2. uzly prvků – značky HTML, stavební kameny stromu.
  3. textové uzly – obsahují text.
  4. komentáře – někdy tam můžeme vložit informace, nebudou se zobrazovat, ale JS je může přečíst z DOM.

Podívejte se na to sami

Chcete-li vidět strukturu DOM v reálném čase, vyzkoušejte Live DOM Viewer. Stačí zadat dokument a okamžitě se zobrazí jako DOM.

Dalším způsobem, jak prozkoumat DOM, je použití vývojářských nástrojů prohlížeče. Ve skutečnosti to používáme při vývoji.

Chcete-li tak učinit, otevřete webovou stránku elk.html, zapněte vývojářské nástroje prohlížeče a přepněte na kartu Prvky.

Mělo by to vypadat takto:

Můžete si prohlédnout DOM, kliknout na prvky, zobrazit jejich podrobnosti a tak dále.

Upozorňujeme, že struktura DOM ve vývojářských nástrojích je zjednodušená. Textové uzly jsou zobrazeny jako text. A neexistují vůbec žádné „prázdné“ (pouze mezera) textové uzly. To je v pořádku, protože většinu času nás zajímají uzly prvků.

Kliknutí na tlačítko v levém horním rohu nám umožňuje vybrat uzel z webové stránky pomocí myši (nebo jiného ukazovacího zařízení) a „prozkoumat“ jej (přecházet na něj na kartě Prvky). Funguje to skvěle, když máme velkou HTML stránku (a odpovídající obrovský DOM) a chtěli bychom v ní vidět místo konkrétního prvku.

Dalším způsobem, jak to udělat, by bylo kliknout pravým tlačítkem myši na webovou stránku a v kontextové nabídce vybrat příkaz „Prozkoumat“.

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

  • Styly – můžeme vidět CSS aplikované na aktuální prvek pravidlo po pravidle, včetně vestavěných pravidel (šedá). Téměř vše lze upravit na místě, včetně rozměrů/okrajů/vycpávek níže uvedeného pole.
  • Vypočteno – zobrazit CSS aplikované na prvek podle vlastnosti:pro každou vlastnost můžeme vidět pravidlo, které ji poskytuje (včetně dědičnosti CSS a podobně).
  • Posluchače událostí – zobrazit posluchače událostí připojené k prvkům DOM (probereme je v další části výukového programu).
  • …a tak dále.

Nejlepší způsob, jak je studovat, je klikat. Většinu hodnot lze upravit přímo na místě.

Interakce s konzolí

Když pracujeme na DOM, můžeme na něj také použít JavaScript. Jako:získejte uzel a spusťte nějaký kód, abyste jej upravili, abyste viděli výsledek. Zde je několik tipů, jak cestovat mezi záložkou Prvky a konzolou.

Pro začátek:

  1. Vyberte první <li> na kartě Prvky.
  2. Stiskněte Esc – otevře se konzole přímo pod záložkou Prvky.

Nyní je poslední vybraný prvek dostupný jako $0 , dříve vybraný je $1 atd.

Můžeme na nich spouštět příkazy. Například $0.style.background = 'red' změní vybranou položku seznamu na červenou, například takto:

Takto získáte uzel z prvků v konzole.

Je tu také cesta zpět. Pokud existuje proměnná odkazující na uzel DOM, můžeme použít příkaz inspect(node) v konzole a zobrazí se v podokně Prvky.

Nebo můžeme jen vypsat uzel DOM v konzole a prozkoumat „na místě“, například document.body níže:

To je samozřejmě pro účely ladění. Od další kapitoly budeme přistupovat a upravovat DOM pomocí JavaScriptu.

Nástroje pro vývojáře prohlížeče jsou skvělým pomocníkem při vývoji:můžeme prozkoumat DOM, vyzkoušet věci a zjistit, co se pokazilo.

Shrnutí

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

  • Značky se stávají uzly prvků a tvoří strukturu.
  • Text se změní na textové uzly.
  • …atd, vše v HTML má své místo v DOM, dokonce i komentáře.

Můžeme použít vývojářské nástroje ke kontrole DOM a ruční úpravě.

Zde jsme probrali základy, nejpoužívanější a nejdůležitější akce pro začátek. Na adrese https://developers.google.com/web/tools/chrome-devtools je k dispozici rozsáhlá dokumentace o nástrojích pro vývojáře Chrome. Nejlepší způsob, jak se naučit nástroje, je kliknout sem a tam, číst nabídky:většina možností je zřejmá. Později, až je budete obecně znát, si přečtěte dokumenty a vyzvedněte si zbytek.

Uzly DOM mají vlastnosti a metody, které nám umožňují mezi nimi cestovat, upravovat je, pohybovat se po stránce a další. Dostaneme se k nim v dalších kapitolách.


No