Document Object Modeling

 

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.

 

Úvod

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:

 

 

Architektúra a história DOMu

 

Š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íklady

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.

 

Linky

 

Stranky o DOM na Živě.cz

Stránky o JavaScripte na Živě.cz

Referenčná príručka k DOM