DOM: Document Object Model

V tomto seriále se zaměříme na problematiku technoligie nazvané DOM - Document Object Model. Pokusím se objasnit jaký je význam této technologie a jak s ní pracovat. Očekávám, že čtenář tohoto seriálu umí pracovat s HTML respektive s XHTML, JavaScriptem a CSS.

Co je to DOM?

Document Object Model - objektový model dokumentu je API - Aplication Programming Interface - aplikační programové rozhraní. Pomocí tohoto rozhraní můžete pracovat se samotnou webovou stránkou. DOM umožňuje přistupovat k jednotlivým objektům XML (XHTML) dokumentu a pracovat s nimi. Těmito objekty jsou elementy, atributy, text, komentáře.. DOM umožňuje na přesně určené místo přidat jakýkoli obsah. A dovede to prostřednictvím JavaScriptu, což ho značně zpřistupňuje webovým tvůrcům. Právě o JavaScriptu a DOMu bude náš seriál.

Díky stromové struktuře dokumentu, dovedeme rozlišit nadřazené, podřazené nebo rovnocenné elementy. Objekty dobře známe z JavaScriptu, například. objekt form. Tento objekt může mít vlastnosti a metody. Vlastnost sama o sobě nedělá v dokumentu žádné změny, pouze vrací informace o objektu. Třeba form.name vrací jméno formuláře. Oproti tomu metody umožňují data nějakým způsobem měnit, nebo provádět nejrůýnější akce. Kupříkladu form.submit(), odesílá formulář. Jestli jde o vlastnost nebo metody lze rozpoznat podle závorky (metoda má závorky, vlastnost nemá). Ač už jde o metodu nebo o vlastnost je spojena s objektem tečkovým zápisem. V tomto zápise může bát také vyjádřena nadřazenost nebo podřezanost elementů - document.form.name, objekt form je podřezený objektu document. K objektům je možné přistupovat pomocí pole. Číslování polí začíná nulou. Vlastnost document.forms[0].elements[1].value vrací hodnotu druhého prvku prvního formuláře dokumentu.

Historie

Historie DOM se, tak jako skoro každá webová technologie točí kolem nedostatků prohlížečů. Základ Objektového Modelu dokumentu se objevil už kdysi dávno v Netscape Navigatoru, kde umožňoval spravovat objekty forms, links, anchors a images. Asi každý kdo se kdy zabýval JavaScriptem, hojně používal metody a vlastnosti objektu forms, při práci s formuláři. To by byl (zatím nestandartizovaný) Level 0 DOM. Ale co čert nechtěl přišly čtyřkové verze prohlížečů ve kterých jak Netscape tak i Microsoft (který podporoval DOM i v MSIE 3) rozšířili možnosti DOMu, bohužel každý jinak. Microsoft přinesl DHTML DOM, který přinášel nové úžasné možnosti prostřednictvím objektu document.all, zatímco Netscape představil document.layers. Proto bylo velmi obtížné vytvořit jeden skript využívající DOM, který by fungoval v obou prohlížečích. Problémy prohlížečů částečně vyřešilo W3C, které navrhlo a schválilo standart W3C DOM. My se budeme dále zabývat specifikací DOM1 (Level 1 DOM).

S přechodem z HTML na XML (respektive XHTML) už není možné přistupovat ke stránce prostřednictvím konkrétních objektů (v XHTML to je možné) forms atd. XML stránka může obsahovat libovolné objekty, proto je definice DOMu obecná (když opomineme DOM0). Protože je nezávislé může být použito pro správu XML dokumentu, grafiky SVG a dalších technologií zakládajících se na XML.

Základy DOMu

To nejdůležitější už víte, teď už se konkrétně zaměříme na webové stránky a DOM. K vysvětlení základních pojmů si vezmeme jednoduchou XHTML stránku. 

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cz" lang="cz">
<head>
	<title>DOM</title>
</head>
<body>
	<h1 style="color:gray">DOM</h1> - 
	<p>
		<strong>Document Object Model</strong>
		<!-- napsáno 23.2.2004 //-->
	</p>
</body>
</html>

DOM k dokumentu přistupuje prostřednictvím několika objektů:

  • element, který zastupuje elementy (p, h1, head..)
  • Attr zastupující atributy (style, class..)
  • Comment zastupující komentáře.
  • Text zastupuje text.
  • A několik dalších nepříliš důležitých (instrukce pro zpracování, jmenné prostory), kterými se nebudeme zabývat

Nejdůležitější je element html, který je kořenovým elementem dokumentu a je zastoupen objektem document, proto se ke každému prvku, který mu je podřazen přistupuje prostřednictvím tohoto objektu. Každou XHTML stránku můžeme zapsat stromovou strukturou, na jejímž vrcholu stojí kořenový element html, který se nadále dělí na head a body, které jsou dětmi (children) kořenového elementu a zárověň jsou sourozenci (siblings). Není na tom nic složitého. Oba jsou objekty typu element. Element h1 je dítětem elementu body a potomkem kořenového elementu. K elementu h1 je připojen objekt typu (attr) - atribut style. Element p je sourozencem elementu h1 a má dvě děti - jjeden objekt typu element - strong a jeden typu comment - komentář. Zde se poprvé objevují textové objekty. Prvním je "DOM", který je dítětem elementu h1 a druhým je "Document Object Model" dítě elementu strong.

Doufám, že je vše jasné:

  • Čtyři objekty - Element, Atribut, Text, Komentář. Ještě existují další, ale již ne tolik podstatné.
  • Každý XML dokument má strukturu podobnou rodokmenu, složenou z jednotlivých objektů - nebo zaké uzlů (node). Výraz node se užívá ve spojení s DOM velmi často. Navrcholu stromu stojí kořenový element, který může mít bezpočet dětí, které jsou rovnocenými sourozenci.

Podpora W3C DOMu

Bohužel W3C jen schvaluje formáty, ale jejich podpora je na někom jiném. Internet Explorer podporuje DOM1 od verze 5. Verze 5 opravuje některé chyby, ale stále jich pár zbývá. Lépe si vede Mozilla (Netscape 6.0), která nepodporuje pouze vynálezy Microsoftu. Opera poskytuje vůbec nejhorší podporu z trojice prohlížečů. Verze 5 a 6 podporují DOM1 minimálně, verze 7 je oprostěná od některých chyb avšak stále jich dost zůstává.

DOM a CSS

DOM umožňuje měnit i styly CSS. Těmito metodami se později budeme také zaobírat. Mám-li shrnout jejich možnosti, umožňují vypínat zapínat styly, odebírat některé definice, přidávat jiné, nastavovat styl jednotlivým elementům atd.

Tím jsme se probrali možnostmi, podporou DOMu. Doufám, že jsem vše náležitě vysvětlil a že jste si vědomi toho, co tato technologie nabízí a umožňuje. Odkazy na příklady použití naleznete v levém sloupci.



Doporučuji
Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.
Potřebujete poradit?

Vyhledávání

Osobně doporučuji

Poradna

Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.

Reklama

Reklama: