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

DOM 1 - esimerkki 1

Seuraava esimerkki antanee paremman ymmärtämyksen asioista käytännössä. Tarkastelemme yksinkertaisen html-dokumentin rakennetta DOM-mallin avulla ja opettelemme tekemään siihen viittauksia:


<html>
<head>
<title> Yksinkertainen dokumentti</title>
</head>

<body id="juuri">
<h1>Otsikkotaso 1</h1>
<table id="taulu">
<tbody>


<tr id="rivi1">
<td id="solu1">Jotain</td>
<td id="solu2">Jotain</td>
</tr>


<tr id="rivi2">
<td id="solu3">Jotain</td>
<td id="solu4">Jotain</td>
</tr>


</tbody>
</table>

<h1>Toinen ykkostason otsikko</h1>

</body>

Yllä olevan dokumentin rakenteen puumaisuus on hyvin ilmeinen ja yksinkertainen. Elementti body on varsinaisen dokumentin runko. Sillä on kaksi lasta (eli lapsisolmua): h1 ja table. Table elementillä on puolestaan yksi lapsi (tbody), jolla puolestaan on kaksi lasta (tr-elementit). Molemmilla taulukon rivi elementeillä on vielä kaksi omaa lasta eli solua (td- elementit).

Dokumenttipuu sisältää solmun jokaiselle elementille ja sen sisältämällä tekstille. Jos elementille on annettu id arvo, voidaan elementtiä kutsua myös id tunnuksella. Esimerkissämme body-elementille on annettu id-tunnus "juuri", joten voimme käyttää sitä aloituspisteenä.

Mikäli haluamme viitata ensimmäiseen h1 elementtiin, voimme esittää jommankumman seuraavista viittauksista:


juuri.firstChild
juuri.childNodes[0]

Table elementtiin voimme viitata joko käyttämällä ominaisuutta childNodes tai tai nextSibling:


juuri.childNodes[1]
juuri.firstChild.nextSibling

Viimeiseen elementtiin juuri ennen body elementtin sulkemista (siis h1 elementtiin) voimme viitata :


juuri.lastChild
juuri.childNodes[2]

Vastaavilla tavoilla voimme viitata taulukon sisäisiin elementteihin. Koska table elementille on annettu id-arvo, voimme käyttää sitä juurielementtinä kun lähdemme matkaamaan dokumenttipuuta. Jos haluamme viitata taulukon ensimmäisestä rivistä takaisin body-elementtiin, voimme tehdä sen seuraavasti:


rivi1.parentNode.parentNode

Jos haluamme viitata taulukon ensimmäisen rivin toiseen soluun, tapahtuu se jollain seuraavista tavoista:


// aloitetaan body elementistä
juuri.childNodes[1].childNodes[0].childNodes[0].childNodes[1]
//tai
juuri.firsChild.NextSibling.firstChild.firstChild.lastChild

//aloitetaan table elementistä
taulu.firstChild.lastChild.previousSibling.lastChild
//tai
taulu.childNodes[0].childNodes[0].childNodes[1]

//aloitetaan tr elementistä
rivi1.lastChild
//tai
rivi1.firstChild.nextSibling
//tai
rivi1.previousSibling.lastChild

Kuten huomasit, niin tapoja on monia ja useimmat niistä johtavat erittäin pitkiin rimpsuihin. Yleisesti on kaikkein helpointa pyrkiä mahdollisimman lyhyisiin viittauksiin käyttämällä joko childNodes[] kokoelmaa tai pyrkiä tekemään viittaus elementin vanhemman kautta (parentElement).

Tutustu artikkelin muihin osiin:
»»» DHTML ja DOM »»» DOM 1
»»» DHTML ja DOM »»» DOM 1 - esimerkki 1.
»»» DHTML ja DOM »»» DOM 1 - esimerkki 2

Dynaaminen HTML ja DOM

DOM 1 - esimerkki 1

Tallenna tämä sivu kirjanmerkkeihin!