HTML DOM

Tämä kirja perustuu WC3n suosituksiin Document Object Model (DOM)

Lisäksi käytetään Mozillan DOM-dokumentaatiota.

HTML DOM eli Hypertext Markup Language Document Object Model (kirjaimellinen suomennos hypertekstimerkintäkielen dokumenttioliomalli) on w:ohjelmointirajapinta (Application programmin Interface API), joka mahdollistaa HTML-tiedostojen sisällön, rakenteen ja tyylin dynaamisen muokkaamisen.

Wikipedia

Wikipedia-tietosanakirjassa on artikkeli aiheesta:

DOM

Kirjan merkinnät

muuttuja, puuttuja - muuttujia
elementti - jokin HTML-elementti
kyhmy - jokin node

Yleistä

Koko HTML-dokumentti on node ja jokainen HTML-elementti on node. Elementtien sisällä oleva teksti on tekstinode ja elementtien attribuutit ovat attribuuttinodeja. Kommentit ovat kommenttinodeja.

<html>
  <head>
    <title>HTML DOM</title> 
  </head> 
  <body> 
    <h1>Yleistä</h1> 
    <p>Tekstiä.</p> 
  </body> 
</html>

html on dokumenttin päänode. Sillä on kaksi lapsinodea, head ja body. head ja body ovat sisaruksia. headella on lapsinode title ja bodyllä nodet h1 ja p, jotka ovat sisaruksia keskenään. title-, h1- ja p- elementeillä on tekstinode.

HTML DOM jäsentää HTML-tiedosto puu rakenteena. Node-puussa html on juurinode (root). Jokaisella nodella juurta lukuunottamatta on tasan yksi parent node (vanhempi), mutta lapsia voi olla rajatta. Noodi, jolla ei ole lapsia on lehti (leaf). Nodet, jolla on sama parent, ovat sisaruksia (siblings).

HTML DOM:issa jokainen node on olio (object), joten sillä on ominaisuuksia (properties) ja metodeja (method). Näitä käsitellään JavaScriptillä tai muulla ohjelmointikielellä. Ominaisuudet ovat jotain, kuten noden nimiä. Metodit ovat jotain tekemistä, kuten poista (delete).

Ominaisuuksia

kyhmy.innerHTML   // kyhmy-noden sisältämä tekstiarvo
kyhmy.nodeName    // kyhmy-noden elementtityyppi
kyhmy.nodeValue   // kyhmy-noden arvo
kyhmy.parentNode  // kyhmy-noden parentnode
kyhmy.childNodes  // kyhmy-noden lapsinodet
kyhmy.firstChild  // kyhmy-noden ensimmäinen lapsinode 
kyhmy.lastChild   // kyhmy-noden viimeinen lapsinode
kyhmy.attributes  // kyhmy-noden attribuuttinodet

nodeName:

nodeName on nodetyypin nimi
nodeName on read-only
elementtinoden nodeName on sama kuin elementin tyyppi
attribuuttinoden nodeName on attribuutin nimi
tekstin noden nodeName on #text
documentnoden nodeName on #document

nodeValue:

nodeValue on noden arvo
elementin nodeValue on null
tekstinoden nodeValue on sen tekstisisältö
attribuuttinoden nodeValue on attribuutin arvo

nodeType:

nodeType on read-only
noden tyyppi, jota kuvataan numerolla
tavallisimmat tyypit ovat:

Tyyppi	Numero
Element	1
Attribute	2
Text	3
Comment	8
Document	9

nodeName, nodeValue ja attributes saavat eri arvoja sen mukaan mikä on noden tyyppi seuraavasti:

Tyyppi	nodeName	nodeValue	attributes	nodeType
Attribute	attribuutin nimi	attribuutin arvo	null	2
CDATASection	#cdata-section	CDATA:n sisältö	null	4
Comment	#comment	kommentin sisältö	null	8
Document	#document	null	null	9
Text	#text	tekstinnoden sisältö	null	3

Metodeja

Metodeja:,

Seuraavassa kyhmy on parentnode ja id, elementti ja node ovt kyhmyn lapsinodeja
kyhmy.getElementByID("id")                // hakee kyhmy-noden elementin tietyllä id:llä
kyhmy.getElementsByTagName("elementti")   // hakee kyhmy-noden tietyt elementit
kyhmy.appendChild("node")                 // lisää kyhmy-nodeen lapsinoden
kyhmy.removeChild("node")                 // poistaa kyhmy-noden lapsinoden

Erikoismetodit:

document.documentElement  // palauttaa juurinoden
document.body             // palauttaa bodyelementti-noden

Noden ominaisuuden hakeminen JavaScriptillä

Perustapoja hakea nodejen ominaisuuksia.

id:n perusteella:

var muuttuja=document.getElementById("id");

Elementtityypin perusteella:

var muuttuja=node.getElementsByTagName("elementti");

Edellä mainittu käsky palauttaa elementit nodetaulukkona (nodearray), ja yksittäisiin elementteihin pääsee käsiksi kutsulla:

var muuttuja=node.getElementsByTagName("elementti"); //tallentaa elementit muuttujaan
var puuttuja=muuttuja[0];                            // tallentaa 0. elementin puuttujaan

Kaikki tietyn elementin esiintymät saadaan tulostettua koodilla

var muuttuja=document.getElementsByTagName("elementti"); //tallentaa elementit muuttujaan
for (i=0;i<muuttuja.length;i++)                          //for-silmukka, jonka ehdossa muuttuja.lenght on nodetaulukon pituus
  { 
  document.write(x[i].innerHTML);                        //kirjoittaa node taulukon yhden noden
  document.write("<br />");                              //kirjoittaa rivinvaihdon
  }

HTML-elementin muokkaaminen

HTML-elementin sisällön muokkaus .innerHTML ominaisuuden avulla

<html>
<body>
<p id="p1">Hei maailma!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="Hei uusi maailma!"; // elementille p annetaan uusi sisältö
</script>
</body>
</html>

HTML-elementin attribuutin muokkaus

<html>
<body>
<script type="text/javascript">
document.body.id="ruumis";       // body-elementille annetaan id "ruumis"
</script>
<p>The background color was changed by the script.</p>
</body>
</html>

HTML-elementin attribuutin muokkaus tapahtumankäsittelijällä (event handler)

<html>
<body>
<input type="button" onclick="document.body.id='ruumis';" // onclick-tapahtumankäsittelijä aktivointi suorittaa koodin
value='Klikkaa tästä ja anna bodylle id "ruumis"'>
</body>
</html>

HTML-elementin sisällön muokkaus funktiolla (function)

<html>
<head>
<script type="text/javascript">
function ChangeText() {
document.getElementById("p1").innerHTML="Hei uusi maailma!";
}
</script>
</head>
<body>
<p id="p1">Hei maailma!</p>
<input type="button" onclick="ChangeText()" value="Klikkaa tästä vaihtaaksesi teksti">
</body>
</html>