Document Object Model (DOM)

Vanha DOM-luento

Vanha luentoesimerkki

DOM on standardi, jonka avulla voidaan manipuloida dynaamisesti XML- tai HTML-dokumenttien dokumenttipuuta.

Jos haluat lukea aiheesta kirjan niin lue DOM Enlightenment. Paras dokumentaatio löytyy Mozilla Development Networkin DOM-sivustolta.

DOM-standardista on useita eri versioita. Laajin rajapinta on selainympäristössä. Samaa, mutta suppeampaa rajapintaa, voi käyttää useimmilla ohjelmointikielillä.

Kukin elementti ja teksti muodostavat dokumenttipuuhun Node-tyypin olion. DOM:in tarjoamia attribuutteja ja metodeja voi tarkastella Firefoxissa DOM-työkalulla Tools|Web developer|Inspector.

Esimerkki DOM-puusta Firefoxin Inspectorilla esitettynä

Käsitteitä

vanhempi-, äiti- tai isäelementti (engl. parent)
elementti, jonka sisällä ko. elementti välittömästi on.
lapsielementti (engl. child)
välittömästi ko. elementin sisällä oleva elementti
jälkeläinen (engl. descendant)
ko. elementin sisällä oleva elementti
esivanhempi, esiisä (engl. ancestor)
elementti, jonka jälkeläinen ko. elementti on
sisarelementti (engl. sibling)
elementit ovat sisaret, jos niillä on yhteinen vanhempielementti
edeltävä/seuraava sisarelementti (engl. preceding/following sibling)
edeltävä elementti on dokumenttipuussa ennen ko. elementtiä, seuraava on sen jälkeen
DOM-puun käsitteitä

Document

Document-tyyppinen document-objekti vastaa aina yhtä selaimeen ladattua www-sivua (window.document). Dokumentti sisältää varsinaisen DOM-puun. Dokumentti perii ominaisuudet ja metodit Node- ja EventTarget-luokilta.

Riippuen siitä onko kyseessä html-dokumentti vai xml-dokumentti voi dokumentin ja muiden objektien rajapinta olla erilainen. Html-dokumenteilla on laajennettu rajapinta. Tähän vaikuttaa suoraan dokumentin mediatyyppi (text/html vs application/xhtml+xml tai application/xml). Tyypillisimmillään erot ilmenevät dokumentin päätettä vaihdettaessa (.html vs .xhtml).

Dokumentin tärkeimpiä ominaisuuksia ovat:

esimerkki

Dokumentin tärkeimpiä metodeja ovat:

Esimerkki 1

Esimerkki 2

Node

Node on abstrakti pääluokka, johon perustuvat kaikki muut DOM-puussa esiintyvät objektit, joista tärkeimmät ovat Element ja Document.

Noden tarkka kuvaus löytyy MDN:n Node-sivulta. Tässä on lueteltu tärkeimmät ominaisuudet:

Esimerkki childNodes-, nodeType-, nodeValue- ja textContent-ominaisuuksista.

Esimerkki noden firstChild-, nextSibling-ominaisuuksista, ja elementin nextElementSibling-ominaisuudesta.

Noden tärkeimmät metodit ovat:

Esimerkki noden appendChild()-, cloneNodE(), insertBefore()-, removeChild() ja replaceChild-metodeista

Element

Element perii kaikki Noden ominaisuudet. Näiden lisäksi Elementin tärkeimpiä ominaisuuksia ovat seuraavat:

Esimerkki Elementin tagName-, id, clientHeight-, clientWidth-ominaisuuksista ja nextElementSibling-metodista

Elementillä on Nodelta perittyjen metodien lisäksi seuraavia tärkeitä metodeja:

Esimerkki Elementin setAttribute()-, getAttribute()-, insertAdjacentElement()-, hasAttribute()- ja remove()-metodeista.

Window

Globaali window-muuttuja vastaa aina yhtä www-dokumentti-ikkunaa tai välilehteä. Window-muuttujan kautta pääsee käsiksi varsinaiseen dokumenttiin (window.document). Window-objektin ominaisuuksiin pääsee normaalisti käsin ilman window-objektin nimeä eli document on sama kuin window.document

Window-objektin tärkeimpiä ominaisuuksia ovat:

Window-objektin tärkeimpiä metodeja ovat:

Esimerkki

CDATA

CDATA-lohkolla merkitään tekstit, jotka eivät ole XML/HTML-rakennetta.

<![CDATA[
Tähän väliin voi kirjoittaa mitä vaan eikä tämä riko sivun rakennetta. Voi
käyttää erikoismerkkejä &, < ja > ihan vapaasti.
]]>

HTMLCollection ja NodeList

NodeList-objekti sisältää kokoelman nodeja. NodeList-objekti voi olla staattinen tai elävä (live). Elävä Nodelist-objekti sisältää automaattisesti kaikki DOM-puuhun rakenteeseen tulleet muutokset. Staattinen NodeList-objekti ei päivity. Useimmat metodit palauttavat live-NodeListeja, mutta esim. document.querySelectorAll() palauttaa staattisen.

NodeListin voi läpikäydä kuten taulukon tavallisella for-silmukalla. Myös for..of-silmukka toimii moitteetta NodeListien kanssa. NodeList-objektia ei kuitenkaan pidä läpikäydä for..in-silmukalla.

HTMLCollection on samalla tavalla taulukkotyyppinen live-objekti kuten NodeList-objekti, mutta se sisältää vain elementtejä eikä kaikkia nodeja kuten NodeList.

Huomioitavaa

Esimerkki

Selainten DOM-laajennokset

Kurssin materiaaleissa käytetään pääasiassa yleisiä DOM-rajapinnan metodeja. Tämä tarkoittaa, että samat metodit toimivat muuallakin kuin selainympäristössä. Esim. voisitte kirjoittaa python-ohjelman, joka käsittelee jotain XML-tiedostoja ja käytössänne olisi tismalleen samat metodit.

Selainympäristössä on kuitenkin sisäänrakennettuna useita lisäominaisuuksia, joista osaa voi myös käyttää. Esim. seuraavista metodeista voi olla paljonkin apua:

Seuraavia EI PIDÄ KÄYTTÄÄ. Näiden käyttäminen voi aiheuttaa tietoturvaongelmia. Näillä saa myös rikottua DOM-puun rakenteen. Nämä eivät myöskään osaa huomioida erikoismerkkejä kuten <, > ja &.

Lisätietoa

vanha luentomalli

malli.js

Vanha DOM-luento

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/luennot/dom/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <https://hazor.iki.fi/>
2020-09-22 14:52:18
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta