AVOIMET

• Apache
• ASP
• Cold Fusion
• CSS
• DHTML & DOM
• JSP ja servletit
• JavaScript
• Konehuone
• Multimedia
• .NET
• Internet-markkinointi
• Perl
• PHP
• SQL
• VBScript
• XHTML
• XML

REK. KÄYTTÄJILLE

• ActionScript 2.0
• ASP
• Apache
• Dreamweaver MX
• Flash
• Flash Lite 2.0
• Java
• MySQL
• MS Access
• MS IIS
• PHP
• SQL
• XSL

FAQ / UKK

• FAQ

PALVELUT YRITYKSILLE

• Hakukoneoptimointi
• Hakusanamainonta
• Kotisivut
• Koulutus ja kurssit

PALVELUT YKSITYISILLE

• Soittoäänet ja muu mobiiliviihde

Dynaaminen HTML ja DOM

 

DOM 1 - mikä muuttui ?

DOM1 määrittely korjasi keskeiset DOM 0 määrittelyn puutteet. Suurimpana hyötynä lienee kyky käsitellä sekä xml- että html dokumentteja. Uuden mallin ansiosta ohjelmoijan on entistäkin helpompi manipuloida dokumenttia. Molemmista valtaselaimista löytyvät samat oliot, samat ominaisuudet ja sekä sama oliohierarkia. Ensimmäistä kertaa (netti)ohjelmoijalla on täysin vapaat kädet sen suhteen miten olioita liitetään dokumenttiin.

DOM1:een sisältyvät seuraavat keskeiset ominaisuudet:

• Elementtien dynaaminen luonti, liittäminen sekä poistaminen.
• Dokumentin osien kopioiminen ja liittäminen.
• Dokumentin tekstiosan läpikäynti ja muuttaminen (DOM1 mallissa jokaisen elementin sisältöä voidaan muuttaa ominaisuudella nodeValue).
• Tietyn merkkijonon hakeminen dokumentista.
• Dokumentin elementtien etsiminen sekä elementtityypin että id-tunnisteen avulla.

DOM 1 - solmutyypit

Seuraavassa taulukossa on käyty läpi tärkeimmät DOM 1 määrittelyn solmutyypit:

Solmutyyppi	Seloste
Document	Olio, joka esittää dokumentin.
DocumentFragment	Olio, joka esittää dokumentin osaa (voi olla myös koko dokumentti)
Node	Viittaus elementtiin, ominaisuuteen tai merkkijonoon
Element	Olio, joka esittää yhden dokumentin elementeistä. Elementti voi sisältää toisen elementin, tekstiä, kommentin, olioviittauksen tai muotoilematonta tekstiä (eli CDATA)
Attribute	Nimi-arvo - pari, joka esittää elementin jonkin ominaisuuden
Comments	Kommentti (selain ohittaa)
Text	Olio, joka sisältää elementin tekstin (sisällön). Parsitaan ilman esitystä.
Cdata	Merkkijono, joka ei sisällä muotoilukoodia. Ei parsita.
Entity	Alkio, joka korvataan merkkijonolla. Siis < merkki korvataan merkinnällä <
Entity Reference	Kun alkiota edeltää &-merkki, korvaava merkkijono laitetaan sen paikalle.
Document Type	Kokoelma dokumentin olioista.

DOM 1 - Ominaisuudet

DOM 1 - malli tarjoaa ison joukon käyttökelpoisia ominaisuuksia dokumenttipuun hallintaan. Alla olevassa taulukossa on listattu vain luettavissa olevat ominaisuudet ja kokoelmat:

Ominaisuus	Selitys
attributes[]	Sisältää elementin kaikki ominaisuudet.
ChildNodes[]	Kokoelma, joka sisältää solmun lapsielementit. (Huom. firstChild, lastChild)
FirstChild	Ensimmäinen lapsielementti (sama kuin childNodes[0])
LastChild	Viimeinen lapsielementti (sama kuin childNodes[n], missä n on kokoelman viimeinen alkio)
NextSibling	Palauttaa solmun vanhemman seuraavan lapsen eli sisaren.
NodeName	Palauttaa elementin nimen.
NodeType	Palauttaa solmun tyypin kokonaislukuna (1=elementti, 3= ominaisuus, 3=teksti).
ParentNode	Viittaus solmun vanhempaan
PreviousSibling	Palauttaa solmun vanhemman edellisen lapsen.

Näiden lisäksi on kaksi ominaisuutta, joiden arvoa voi suoraan muuttaa (read-write properties):

Ominaisuus	Selitys
data	Merkkijono, jossa on solmun sisältämä teksti. Jos solmu ei sisällä tekstiä, arvo on "undefined".
nodeValue	Merkkijono, joka sisältää solmun sisältämän tekstin. Jos solmu ei sisällä tekstiä, arvo on "null".

DOM 1 - Metodit

DOM 1 tarjoaa myös laajan valikoiman metodeja, joiden avulla voimme hallita ja muokata dokumenttipuuta. Alla olevassa taulukossa on listattu tärkeimmät Document-olioon liittyvät metodit.

Ominaisuus	Selitys
document.createElement(elementti)	Luo uuden solmun.
document.createDocumentFragment()	Luo uuden dokumentin osan.
document.createTextNode(data)	Luo uuden tekstisolmun.
document.createAttribute(nimi)	Luo elementille ominaisuuden.
Document.getElementsByTagName(elementti)	Palauttaa listan solmuista, jotka täsmäävät etsittävän elementin nimeen (NodeList).

HTMLDocument-oliolla on yleisten Document-olion metodien lisäksi seuraavat omat kutsut:

Ominaisuus	Selitys
HTMLDocument.open()	Avaa dokumentin sisällön kirjoittamista varten.
HTMLDocument.close()	Sulkee dokumentin.
HTMLDocument.write(teksti)	Kirjoittaa tekstiä avoimeen dokumenttiin.
HTMLDocument.writeln(teksti)	Kirjoittaa tekstin ja rivinvaihdon avoimeen dokumenttiin.
HTMLDocument.getElementById(id)	palauttaa elementin, jonka ID on annettu parametrina.

Node-oliolla on joitain hyödyllisiä metodeja , jotka on vielä tässä syytä käydä läpi:

Ominaisuus	Selitys
Node.insertBefore(lapsisolmu, viittaus)	Lisää lapsisolmun ennen viittausta.
Node.replaceNode(lapsisolmu, viittaus)	Korvaa vanhan solmun ennen viittausta uudella solmulla.
Node.removeNode (lapset)	Poistaa dokumentin lapsisolmun. Jos parametri lapset annetaan, poistetaan kaikki solmun lapset. Muuten poistetaan vain itse solmu.
Node.appendChild(lapsisolmu)	Lisää uuden solmun parametrina annetun solmun lapsisolmuksi.
Node.hasChildNodes()	Palauttaa "true", jos solmulla on lapsia.
Node.cloneNode(lapsisolmut)	Luo kopion parametrina annetusta solmusta lapsineen. Muuten kopioi vain juurisolmun.
Node.swapNode(solmu)	Vaihtaa solmujen paikkaa.

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

Tallenna tämä sivu kirjanmerkkeihin!