DOM

JAVASCRIPT JA DOM KOULUTUSTA VUONNA 2025!

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

Mikä on DOM (dokumenttioliomalli)?

DOM (Document Object Model) on objektilähtöinen ohjelmointimalli, joka tarjoaa standardoidun tavan jäsentää ja käsitellä rakenteellisia dokumentteja, kuten HTML- tai XML-dokumentteja Se mahdollistaa ohjelmallisen pääsyn dokumentin sisältöön, rakenteeseen ja tyyliin, ja tarjoaa mahdollisuuden muokata niitä dynaamisesti.

DOM ei ole ohjelmointikieli, vaan standardoitu rajapinta, jota useat ohjelmointikielet, kuten JavaScript ja PHP, implementoivat mahdollistaakseen rakenteellisten dokumenttien käsittelyn. Tästä syystä DOM:n ymmärtäminen on web-kehittäjälle yhtä keskeinen taito kuin vaikka if-else-ohjausrakenteen osaaminen – se toistuu samanlaisena sekä frontend-kielissä että palvelinpuolen ohjelmoinnissa.

DOM esittää dokumentin rakenteen puumaisena hierarkiana, jossa jokainen elementti, attribuutti ja tekstisisältö on niin kutsuttu solmu. Esimerkiksi taulukkodata kuvataan HTML-kielessä seuraavalla rakenteella: 


<table id="tbl_1">
<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>

DOM-mallin mukaisesti tämän voi visualisoida puurakenteena, joka mahdollistaa dokumentin tehokkaan ja jäsennellyn käsittelyn.

DOM puumallin rakenne-esimerkki

DOM-mallin mukaan rakenteellinen dokumentti koostuu solmuista (nodes). Nämä solmut edustavat dokumentin eri osia ja voivat olla elementtejä, attribuutteja tai tekstisisältöä.

DOM:n keskeiset käsitteet ovat:

Nämä käsitteet mahdollistavat yhtenäisen sanaston rakenteellisten dokumenttien käsittelylle. Aiemmassa esimerkissä table on html-elementin lapsi. Samalla tavoin voidaan myös sanoa, että tbody, tr ja td ovat kaikki table-elementin lapsia. Kaikki tr-elementit ovat keskenään sisaruksia, kuten myös yksittäisen rivin td-elementit keskenään. Ja kaikilla td-elementeillä esimerkissä on tetenkin tekstisisältöä.

Esimerkiksi seuraavalla DOM:ia hyödyntävällä JavaScript-koodilla voidaan muokata fontin väriä taulukossa: 


var elementti = document.getElementById("tbl_1");
elementti.style.color = "red";  // Muutetaan tekstin väri punaiseksi

DOM:n versiot

Vaikka DOM on nykyään vakiintunut standardi, sen kehityspolku on ollut mutkikas ja täynnä yrityksiä ja erehdyksiä, joiden seurauksena itse standardi on muuttunut aikojen myötä. Seuraava listaus esittelee pintapuolisesti DOM:n eri versiot.

DOM 0

DOM:n ensimmäinen versio debytoi 1990-luvun lopussa. Tässä varhaisessa vaiheessa DOM:ia ei ollut standardisoitu, ja toteutus vaihteli selainvalmistajan ja jopa selainversion mukaisesti. Esimerkiksi Microsoftin Internet Explorer käytti document.all[]-kokoelmaa, kun taas Netscape ei tukenut tätä ominaisuutta lainkaan. Vaikka DOM 0 oli puutteellinen, se oli kuitenkin keskeinen askel kohti virallisen DOM-standardin kehittymiselle.

DOM 1

DOM 1 toi tullessaan paljon kaivattua johdonmukaisuutta ja laajempaa selaintukea. Se mahdollisti yksittäisten elementtien manipuloinnin ja esitteli standardoidun tavan navigoida dokumentissa solmusta toiseen. DOM 1 esitteli myös keskeisiä, standardoituja metodeja ja ominaisuuksia, kuten getElementById ja getElementsByTagName, jotka ovat DOM:n hallinnan keskiössä tänäkin päivänä.

DOM 2

DOM 2 -standardi laajensi merkittävästi DOM 1:n toiminnallisuutta. DOM 2 standardisoi elementtien tapahtumien käsittelyn ja dokumentin tyylien hallinnan, mikä edisti selaimien ja verkkosivustojen yhteensopivuutta. Lisäksi DOM 2 toi uusia mekanismeja dokumentin hierarkian läpi liikkumiseen, mikä tarjosi kehittäjille entistä joustavampia tapoja manipuloida dokumentin rakennetta.

DOM 3

DOM 3 oli viimeisin W3C:n laatima DOM-standardin versio. Se toi mukanaan mm. dokumenttien validoinnin, lataus- ja tallennusrajapinnat sekä laajemmat mahdollisuudet käsitellä dokumenttipuuta ja nimiavaruuksia. Sittemmin DOM:n kehitys on jatkunut, HTML:n ja CSS:n tavoin, WHATWG:n alaisuudessa jatkuvasti päivittyvänä "living standard"-mallina.

Artikkelin tiedot

Otsikko: Mikä on DOM (dokumenttioliomalli)?

Kuvaus: Tutustu dokumenttioliomalliin (DOM) ja sen eri versioihin. DOM tarjoaa rakenteen, jonka avulla ohjelmointikielet kuten JavaScript voivat muokata verkkosivuja.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: