Dom je objektové modelovanie dokumentu. Teda je to aplikačné programové rozhranie pre HTML a XML. Definuje logickú štruktúru dokumentu a umožňuje pristupovať a manipulovať s jednotlivými časťami dokumentu.
Pomocou DOMu dokážeme pristupovať k dokumentu, modifikovať jeho štruktúru a meniť, mazať alebo pridávať jednotlivé jeho elementy. To znamená, že môžeme pracovať s čímkoľvek, čo dokument obsahuje. DOM nie je závislý na programovacom jazyku ani na platforme. DOM je objektový model v hierarchickej štruktúre. Tento koncept vychádza z prirodzenej vlastnosti XML respektíve HTML dokumentu. Ukážme si ako vyzerá časť HTML dokumentu v objektovom modele.
<table>
<tbody>
<tr>
<td>Biela</td>
<td>Cervena</td>
</tr>
<tr>
<td>Zlta</td>
<td>Modra</td>
</tr>
</tbody>
</table>
Gafický to vyzerá takto:
DOM však nie je len niečo abstraktné. DOM je implementovaný v rade skriptovacích jazykoch. Najznámejším z nich je JavaScript. Väčšina skriptovacích jazykov dokáže pracovať s DOM dokumentu, čo sa často využíva pri tvorbe dynamického webu.
Ukážme ako môžeme narábať s objektami predchadzajúceho príkladu:
// pristupuje k elementu tbody z ttable
var myTbodyElement = myTableElement.firstChild;
// pristupuje k druhemu tr elementu
// Zoznam priamych nasledovnikov zacina od 0 co je v celku bezne a nie od 1.
var mySecondTrElement = myTbodyElement.childNodes[1];
// odstranuje prvy td element z druheho tr
mySecondTrElement.removeChild(mySecondTrElement.firstChild);
// meni textovy obsah bez toho, aby menil samotny td element
mySecondTrElement.firstChild.firstChild.data = "Peter";
Elementy, ktoré v danej stromovej štruktúre vychádzajú priamo z niektorého iného elementu, sa nazývajú children. Ide o pojem dobre známy z terminológie OOP.
Ich predchodcovia sú ancestor. V DOM sa objekt na uzle stromu nazýva tiež NODE (uzol). Ak ma niektorý uzol viac nasledovníkov, tak ako v tomto príklade,
tie sa ukladajú do zoznamu, ktorý je číslovaný od 0. Medzi nimi je potom vzťah súrodenec (siblings). Číslovanie vychádza z poradia, v akom sú prvky
umiestnené v dokumente (z hora na dol). Na tejto štruktúre je zaujímavá ešte jedna vec a to, že aj na samotný text sa pozerá ako na objekt.Každý dokument obsahuje jeden element typu dokument, jeden alebo viac elementov typu komentár, ktoré vychádzajú priamo z koreňového uzla, ktorý sa tiež
nazýva ROOT . Element DOCUMENT je v koreni stromu, teda najvyššie v hierarchii. V HTML dokumente sa označuje ako <HTML>. Dôležitá vlastnosť
DOMu je, že ak sú na reprezentáciu dokumentu použité dve rôzne implementácie DOMu, výsledkom bude ta istá štruktúra. Diagram nereprezentuje dátovú
štruktúru, ale jednotlivé objekty.Teda ak by sme mali stručne zhrnúť, DOM definuje:
Štandard DOM je v súčastnosti vo verzii 3 čo sa tiež označuje „LEVEL 3 DOM“. Vývoj prešiel postupne od verzie 0. DOM sa skladá z viacerých modelov, pričom v daných implementáciach nemusia byť všetky. Napríklad v prehliadačoch bývajú dobre implementované udalosti pohybu myšou. Ostatné môžu byť implemetované menej dobre alebo vôbec.
Znázornenie modulov vo verzii 3:
Dnešné verzie prehliadačov už obyčajne DOM podporujú. Podporu si môžete všimnúť v nasledujúcej tabuľke. Tiež si v nej môžeme všimnúť bežne použivané metódy a vlastnosti využívané v DOMe.
vlastnosť alebo metóda: | súčasť DOM: | IE 5, 5.5 | IE 6 | Mozilla/NN6 | Konqueror 2.2 | Opera 5, 6 | poznámky |
Štandartné a univerzálne použiteľné metódy a vlastnosti | |||||||
documentElement | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | |
getElementById(hodnota) | L1 HTML, L2 Core | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | |
getElementsByTagName(meno) | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | |
getAttribute(meno) | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | |
parentNode | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | |
nextSibling | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | |
previousSibling | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | |
firstChild | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | |
lastChild | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | |
childNodes[] | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | |
nodeName | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | |
nodeValue | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | i nastavenie |
data | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | i nastavenie |
tagName | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | |
className | L1 HTML | ÁNO | ÁNO | ÁNO | ÁNO | iba čítanie | i nastavenie |
id | L1 HTML | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | i nastavenie |
title | L1 HTML | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | i nastavenie |
item(index) | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | ÁNO | |
Štandartné, ale "problematické" vlastnosti a metódy | |||||||
attributes[] | L1 Core | ÁNO | ÁNO | ÁNO | ÁNO | NIE | rôzna interpretácia! |
nodeType | L1 Core | chyba v IE5 | ÁNO | ÁNO | ÁNO | NIE | |
name | L1 Core | iba v XML | ÁNO | ÁNO | ÁNO | NIE | |
value | L1 Core | iba v XML | ÁNO | ÁNO | ÁNO | NIE | |
getAttributeNode(meno) | L1 Core | NIE | ÁNO | ÁNO | ÁNO | NIE | |
substringData(poč. pozícia, dĺžka) | L1 Core | NIE | ÁNO | ÁNO | ÁNO | NIE | |
Neštandartné rozšírenie od Microsoftu | |||||||
innerHTML | MS | ÁNO | ÁNO | ÁNO | ÁNO | NIE | i nastavenie |
innerText | MS | ÁNO | ÁNO | NIE | iba nastavenie | NIE | i nastavenie |
outerHTML | MS | ÁNO | ÁNO | NIE | NIE | NIE | i nastavenie |
outerText | MS | ÁNO | ÁNO | NIE | NIE | NIE | i nastavenie |
children[] | MS | ÁNO | ÁNO | NIE | NIE | NIE |
Príklad 1: Máme jednoduchý HTML dokument:
<html>
<head>
<title>Objektový model dokumentu</title>
</head>
<body>
<h1 class=“dom_nadpis“>Prechádzanie HTML dokumentu pomocou
DOMu</h1>
<p id=”first”>Prvý odstavec</p>
<p id=”second”>Druhý odstavec</p>
<p id=”third”>Tretí odstavec</p>
</body>
</html>
Pomocou funkcie z nasledujúceho JavaScriptu vypíšeme meno tagu elementu s id first. Čiže najprv si nájdeme Element, bude v premennej prvy_odstavec.
<script type="text/javascript" language="JavaScript">
<!--
function funkcia() {
var prvy_odstavec = document.getElementById('first');
var meno = prvy_odstavec.tagName;
alert(meno);
}
-->
</script>
Výsledok si môžeme pozrieťtu - DOM_example1.html.
Príklad 2: K tomu istému HTML dokumentu urobíme nasledujúcu funkciu.
var odstavce = document.getElementsByTagName(‘p’);
var druhy_odstavec = odstavce[1];
var text_odstavca = druhy_odstavec.firstChild;
var text_value = text_odstavca.nodeValue;
alert(text_value);
var id_value = druhy_odstavec.getAttribute(‘id’);
alert(id_value);
Premenná odstavce bude obsahovať pole elementov s menom ”p”. Premenná druhy_odstavec je druhý prvok tohto poľa (čísluje sa od 0). Text_odstavca obsahuje objekt prvého potomka. Do text_value bude obsahovať hodnotu tohto uzla a hneď ho aj vypíšeme. Následne do premennej id_value priradíme hodnotu id tohto objektu. A potom ju vypíšeme.
Výsledok si môžeme pozrieť DOM_example2.html.
Príklad 3: K tomu istému HTML dokumentu urobíme nasledujúcu funkciu. Od príkladu 2 sa líši nasledovne. Rozdiel je pred druhým výpisom. getAttribute vráti rovno hodnotu ako je to v príklade 2, ale getAttributeNode vráti iba objekt. Jej hodnotu dostaneme až ďalším riadkom.
<script type="text/javascript" language="JavaScript">
<!--
function funkcia() {
var odstavce = document.getElementsByTagName('p');
var druhy_odstavec = odstavce[1];
var text_odstavce = druhy_odstavec.firstChild;
var text_value = text_odstavce.nodeValue;
alert(text_value);
var id_node = druhy_odstavec.getAttributeNode('id');
var id_value = id_node.nodeValue;
alert(id_value);
}
-->
</script>
Výsledok si môžeme pozrieť DOM_example3.html.
Príklad 4: Dolovanie textu nám uľahčí funkcia InnerText v nasledujúcom príklade. Úloha funkcie je opäť tá istá.
<script type="text/javascript" language="JavaScript">
<!--
function funkcia() {
var odstavce = document.getElementsByTagName('p');
var druhy_odstavec = odstavce[1];
var text_value = druhy_odstavec.innerText;
alert(text_value);
var id_value = druhy_odstavec.getAttribute('id');
alert(id_value);
}
-->
</script>
Výsledok si môžeme pozrieť DOM_example4.html.
Stránky o JavaScripte na Živě.cz