HTML DOM

Wikikirjastosta
Siirry navigaatioon Siirry hakuun
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:

Kirjan merkinnät[muokkaa | muokkaa wikitekstiä]

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

Yleistä[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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ä[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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>