Dynaaminen HTML ja DOM

JAVASCRIPT JA DOM KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi
IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Dokumenttioliomalli

Neljännen sukupolven selaimien myötä monille ohjelmoijille tuli tutuksi käsite dHTML. Sekä Internet Explorerilla että Netscape Navigatorilla oli kuitenkin omat versionsa käsitteestä. Molempien selaimien toteuttamassa dHTML:ssä oli tiettyjä yhtenäisyyksiä, mutta eroavaisuuksia oli enemmän. Tämän takia W3C aloitti yhteisen ohjelmointirajapinnan kehittämisen. Rajapinnan nimeksi tuli DOM eli Document Object Model.

Tavoitteena on tuottaa yksi yhteinen standardi, joka toimisi kaikissa selaimissa eri ympäristöissä ja vieläpä ohjelmointikielestä riippumatta. Ohjelmoijalle DOM tarjoaa yhden standardin tavan käsitellä dokumenttia ja mitä tahansa sen elementtiä tyypistä tai ohjelmointikielestä riippumatta. Laitevalmistajille se tarjoaa keinon tehostaa ohjelmistokehitykseen käytettyjä resursseja.

Tällä hetkellä DOM-määrittelystä on olemassa DOM 0, DOM 1 ja DOM 2 määrittelyt sekä työn alla on DOM 3 määrittely. Tuoreimmat speksit löytyvät osoitteesta www.w3c.org.

Mikä on DOM?

Dokumenttioliomalli (DOM) määrittelee, kuinka dokumentissa olevat elementit välittävät tietoa toisilleen ja kuinka elementteihin voidaan viitata. Tämän DOM saavuttaa kuvaamalla dokumentin (xml tai html) elementtihierarkian puurakenteen mukaisesti.

Dom-oliomalli on hierarkkinen dokumenttipuu, joka koostuu etukäteen rajoittamasta määrästä solmuja(nodes). Jokainen solmu on yksittäinen olio hierarkiassa. Dokumenttiolio on koko hierarkian ylimmällä tasolla. Jokaisella solmulla voi olla useita lapsisolmuja (child nodes, children). Vastaavasti kaikilla solmuilla on paitsi juurisolmulla (body, root node) on äitisolmu (parent node).

Dokumenttipuun rakenne muistuttaa hyvin pitkälti oikeaa puuta:

Puussa on juuri; dokumenttipuussa on runko (body, root node)
Puussa on oksia; dokumenttipuussa on lapsielementtejä (children, child node)
Puussa on lehtiä; dokumenttipuussa on lehtiä (nodes), joilla ei ole enää omia lapsielementtejä.

Alapuolella on erittäin yksikertainen dokumenttipuun graafinen kuvaus sekä koodipätkä josta se on vedetty.


<table>
<tbody>
<tr>
<td> Sisältö 1 </td>
<td> Sisältö 2 </td>
</tr>
<tr>
<td> Sisältö 3 </td>
<td> Sisältö 4 </td>
</tr>
</tbody>
</table>

Tärkein piirre dokumenttipuussa on, että siinä voidaan liikkua vapaasti ja se voidaan käydä läpi viittamaalla mihin tahansa solmun lapseen, vanhempaan tai sisarukseen. Jokainen solmu (eli dokumentin elementti ) on oma olionsa, jolla on omat ominaisuudet ja metodit.

Miten hyödyntää DOM-mallia ?

Suuri kysymys mielessäsi on, kuinka minä nyt tätä sitten hyödynnän. Vastaus on aika yksinkertainen. DOM:in API sisältää niin olioita kuin oliokokoelmiakin ominaisuuksineen ja metodeineen. Sen takia jokaisella oliopohjaisella ohjelmointikielellä mallin käsittely on kohtalaisen helppoa. Parhaita kieliä ovat EcmaScript sekä Java, mutta myös JScript ja VBScript tukevat DOM-mallia.

Tutustu artikkelin muihin osiin:
»»» DHTML ja DOM »»» Dokumenttioliomalli
»»» DHTML ja DOM »»» DOM 0
»»» DHTML ja DOM »»» Objektimalli

Dynaaminen HTML ja DOM

Dokumenttioliomalli

Mikä on DOM?

Miten hyödyntää DOM-mallia ?

Tallenna tämä sivu kirjanmerkkeihin!