Víte, co je to Objektový modelu dokumentu? Víte, jakým způsobem ho můžete používat? Nový seriál článků by vás měl krok po kroku dovést k praktickému osvojení celé problematiky. Úvodní díl bude zaměřen na seznámení s DOM.
Document Object Model neboli objektový model dokumentu je tzv. API (aplication programming interface – aplikační programové rozhraní), které definuje obecný standard pro přístup k jakémukoliv platnému HTML dokumentu anebo správně strukturovanému XML dokumentu. Toto rozhraní je zcela nezávislé na programovacím jazyku.
V praxi se jedná o velice užitečný nástroj, díky kterému je možné jednoduše přistupovat k HTML či XML dokumentu a jeho částem, libovolně je měnit, mazat nebo přidávat nové. Asi nejzajímavější věcí na DOM je skutečnost, že toto rozhraní je implementováno v dnešních moderních prohlížečích (IE 5+, Mozilla, resp. NN6, Opera 4+) a lze je obsluhovat pomocí JavaScriptu. Díky tomu, že se jedná o jediný standard (i když je pravda, že implementace v jednotlivých prohlížečích se mírně odlišuje, navíc díky Microsoftu máme i některá nestandardní rozšíření), je možné psát javascripty tak, že jediný kód bude funkční ve všech moderních prohlížečích.
Tento seriál, jehož úvodní díl nyní čtete, by měl být představením DOM a návodem k jeho praktickému používání, které bude demonstrováno právě na příkladech dynamické manipulace s HTML stránkou prostřednictvím jazyka JavaScript.
V úvodním díle si dovolím začít poněkud zeširoka. Doufám, že to nebude na škodu, a od příště se již budeme moci zaměřit na konkrétní příklady.
Nebude od věci, když se vypravíme „ke kořenům“ a zrekapitulujeme si, co se v různé době a kontextu skrývalo a skrývá pod nálepkou DOM.
Pojem „objektový model dokumentu“ je v současnosti používán pro několik trochu odlišných věcí.
Objektový model dokumentu (Document Object Model) vznikl ve své zřejmě nejstarší verzi pro potřeby přístupu k některým typům elementů na HTML stránce prostřednictvím JavaScriptu. V prohlížeči Netscape Navigator verze 3 tak bylo možné přistupovat ke kolekci objektů forms, images, links a anchors. Tento objektový model, někdy také nazývaný jako „Level 0 DOM“, implementoval i Microsoft do Internet Exploreru 3.
Další úroveň vývoje DOMu přišla se „čtyřkovými“ prohlížeči (IE 4, NN 4). Ve snaze poskytnout webovým tvůrcům co nejvíce možností dynamických změn a kontroly nad HTML stránkou v browseru byl DOM v těchto prohlížečích povýšen na univerzálního správce HTML dokumentu, definoval množství nových objektů a jim příslušejících vlastností a metod. Zásadní problém byl ovšem v tom, že Netscape a Microsoft si zvolili každý svou vlastní, zcela odlišnou podobu objektového modelu. Ti, kdo někdy psali javascriptový kód pro tyto prohlížeče, si jistě dobře pamatují na obsáhlé skripty, v nichž v jedné části začínaly příslušné příkazy document.all a ve druhé document.layers…:). Podoba DOM v těchto prohlížečích se někdy nazývá „Intermediate DOM“, Microsoft dnes v souvislosti s IE 4 hovoří o „DHTML DOM“.
Schizofrenní situace kolem rozdílných DOMů vyústila v univerzální řešení – tím je W3C Document Object Model. Jedná se o standard (přesněji řečeno o celý balík standardů) vytvořených a schválených konsorciem W3C. Právě tento standard W3C bude předmětem našeho zájmu.
Upřesňující poznámka: pro zjednodušení budu nadále používat pouze zkrácený termín „DOM“ pro označení Objektového modelu dokumentu – W3C DOM.
V současné době existují 3 „úrovně“ standardu DOM – DOM Level 1, DOM Level 2 a DOM Level 3. Z hlediska historického i věcného staví každá následující, vyšší úroveň DOMu na základech předchozí, nižší úrovně. Prakticky to tedy vypadá tak, že implementace DOM Level 2 neznamená nekompatibilitu s DOM Level 1, ale pouze přidává nové, rozsáhlejší možnosti.
Někdo by mohl namítnout, že to není nic nového, neboť například Internet Explorer 5 umí DOM 1, a přesto je možné používat starý „DHTML DOM“. Nicméně skutečnost je taková, že IE 5 obsahuje paralelně dvě implementace DOM, a to DOM Level 1 a DHTML DOM. Tyto dva standardy nejsou vzájemně kompatibilní a DHTML DOM je v prohlížeči podporován pouze kvůli zpětné kompatibilitě se stránkami tvořenými pro IE 4.
Standard každé úrovně DOM se skládá z několika modulů, částí. Konkrétně u DOM Level 1 je to modul Core (jádro) a modul HTML. Modul Core definuje sadu základních (fundamental) nízkoúrovňových rozhraní, která může reprezentovat jakýkoliv strukturovaný dokument. Tento základ je nezbytný pro každou implementaci DOM. Kromě toho obsahuje i rozšiřující rozhraní pro reprezentaci XML dokumentů. Tato rozšíření nejsou nezbytná pro implementace, které poskytují pouze přístup k HTML dokumentům. Modul HTML definuje rozhraní specifická pro HTML dokumenty a vyžaduje implementaci základních rozhraní modulu Core.
Struktura DOM Level 2 a Level 3 je o poznání členitější, ovšem některé moduly ještě nejsou v definitivní podobě „W3C Recomendation“.
Začněme však takříkajíc „od píky“, tj. od základů, které nám umožní pochopit, jaký je princip DOM, v čem se liší od předchozích verzí Objektového modelu dokumentu, co DOM je a co DOM není. Základem pro jakékoliv používání DOM v praxi je pochopení principu, jakým DOM „zachází“ s XML či HTML dokumentem.
XML nebo HTML dokument jako reprezentace DOM objektů
Pozorný čtenář si již stačil všimnout, že ačkoliv rané verze DOMu vznikly výhradně pro účely (omezené) manipulace s elementy HTML stránky v prohlížeči, W3C DOM je univerzálním rozhraním pro jakýkoliv platný HTML dokument, nebo správně strukturovaný XML dokument (tím je například i webová stránka v XHTML, nebo wapová stránka v jazyku WML). Jeho „pole působnosti“ je tedy značně širší. Při vytváření DOM tedy bylo nutné zvolit přístup s vyšší mírou abstrakce a obecnosti, než v případě raných verzí DOM v prohlížečích. Předchozí objektové modely byly „šity na míru“ jazyku HTML, který má určitou strukturu a definuje konkrétní tagy, atributy a vztahy mezi nimi. Vzhledem k tomu, že jazyk XML stanovuje v podstatě pouze formální pravidla pro tvorbu XML dokumentu, jeho elementů a atributů, a nedefinuje žádné konkrétní elementy a atributy, nelze univerzálně použít objekty, které se odvolávají na prvky specifické pro HTML dokument.
Jak vypadá reprezentace DOM objektů pro XML a potažmo HTML dokument? Podívejte se na následující příklad krátkého XML dokumentu. Poté si prostudujte schéma, které názorně ukazuje, jak vypadá reprezentace DOM objektů pro tento dokument.
<?XML version="1.0" encoding="UTF-8"?>
<model>
<!--popis DOM levelu skladajici se ze jmena a url s informacemi-->
<jmeno>DOM Level 1</jmeno>
<info-url nazev=”W3C Recomendation”>http://www.w3.org/TR/REC-DOM-Level-1/</info-url>
</model>
Popišme si nyní konkrétní podobu struktury DOM objektů vzniklé z našeho testovacího XML dokumentu a zkusme definovat typy vztahů mezi jednotlivými objekty. Ti, kdo znají Javascript a používají DHTML DOM (podrobně si o tom můžete přečíst i na Živě v právě probíhajícím seriálu o JavaScriptu), budou mít snad pochopení trochu ulehčeno.
Celá struktura má podobu jakéhosi stromu skládajícího se z několika objektů (místo slova objekt můžeme také používat termínu uzel-node). Objekty mohou být různého typu. Nejdůležitějšími typy jsou Document (daný objekt je typu dokument – jedná se vždy o kořenový element dokumentu. V případě jazyka HTML by se jednalo o element <HTML>.), Element (daný objekt je element), Attr (daný objekt je typu atribut) a Text (objekt je typu text). V našem příkladu se objevuje ještě typ Comment (daný objekt je komentář). Existují ještě další typy, které ovšem nyní pro nás nejsou důležité.
Na vrcholu našeho DOM stromu stojí objekt s názvem <model>. Jedná se o objekt typu Document, který vždy reprezentuje kořenový (root) element dokumentu. V kódu našeho XML dokumentu vidíme, že do elementu <model> je vnořen komentář a dva další elementy s názvy <jmeno> a <info-url>. Řečí DOM jsou všichni tři (jak komentář, tak další dva objekty <jmeno> a <info-url>) dětmi (children) objektu <model>, který je vůči nim v roli předka (ancestor). Zároveň jsou tyto tři objekty (komentář, <jmeno> a <info-url>) sourozenci (siblings). První z těchto tří sourozenců je objekt typu Comment, druzí dva (<jmeno> a <info-url>) jsou objekty typu Element.
V kódu vidíme, že elementy <jmeno> a <info-url> nesou textový obsah. Důležité je vědět, že v hierarchii DOM je tento textový obsah také objektem, a to typu Text. První objekt typu Text (DOM Level 1) je dítětem (child) objektu <jmeno>, druhý objekt typu Text (http://www.w3.org/TR/REC-DOM-Level-1/) je dítětem objektu <info-url>. Posledním objektem v DOM reprezentaci našeho XML dokumentu je nazev, což je objekt typu Attr (atribut). Objekty typu Attr mají zvláštní postavení, neboť stojí tak trochu stranou mimo hlavní strom DOM objektů (atributy jsou brány spíše jako vlastnosti elementu, kterému náležejí). Pro úplnost dodejme, že objekty komentář, <jmeno>, <info-url> a oba objekty typu Text (tedy všechny kromě objektu nazev) jsou potomky (descendants) objektu <model>. Všimněte si rozdílu mezi dítětem (child) a potomkem (descentant). Rozdíl je možné demonstrovat na objektu typu Text v našem příkladu. Objekt text (http://www.w3.org/TR/REC-DOM-Level-1/) je potomkem objektu <model> ale nikoliv jeho dítětem (analogie s "genealogickým" označením je jasná, např. váš syn není dítětem vaší matky, ovšem je jejím potomkem).
To by myslím pro dnešek stačilo. Vymezili jsme si, co rozumíme pod termínem DOM, a seznámili se se strukturou DOM objektů na příkladu jednoduchého XML dokumentu. V příštím díle se již zaměříme na implementaci DOM v jazyce JavaScript, ukážeme si syntaxi příkazů DOM v tomto jazyce a vyzkoušíme si „procházení“ HTML dokumentem.