HTML DOM Sissejuhatus
HTML DOM e. Html dokumendi objektipõhine modelleerimine
(HTML Document Object Model) on see mis määrab missuguste standarditega manipuleeritakse Html dokumenti.
DOM esitab Html dokumenti, hierarhilise struktuuri-puuna. Sellesse kuuluvad Html elemendid, atribuudid ja tekst.
Html DOM on veebistandard mille abil saab muuta, lisada v. kustutada Html elemente.
HTML DOM Node (sõlm e. liides)
DOM'ile vastavalt on kõik asjad Html dokumendis n.ö. liidesed (node).
- Kogu dokument on liides
- Iga Html märgis on elemendi liides
- Tekst Html elemendis on teksti liides
- Iga Html atribuut on atribuudi liides
- Kommentaar on kommentaari liides
Eestikeelde tõlgituna tundub asi päris segane olevat kuid siin olen püüdnud lihtsalt definitsioone lahti seletada. Edaspidi praktiliste näidete varal saab teema selgemaks ning kõik loksub paika.
Vaatame järgnevat Html dokumenti.
<html>
<head>
<title>DOM Sissejuhatus</title>
</head>
<body>
<h1>DOM Õppetund 1</h1>
<p>Tere Jälle!</p>
</body>
</html>
Selle Html dokumendi juur-liides on märgis <html>. Selle dokumendi ülejäänud liidesed asuvad <html> märgise sees. Antud juhul <head> ja <body> on tema tütar-liidesed. Teksti-liidese "Tere Jälle!" juur-liideseks on <p> liides.
Liides <head> hoiab endas <title> liidest. Liides <body> hoiab endas <h1> ja <p> liideseid. Antud juhul on <title> <h1> ja <p> tütar-liidesed.
Tavatekst asub alati teksti-liideses.
Näiteks: <title>DOM Sissejuhatus</title>, elemendi liides <title> hoiab endas teksti-liidest, mille väärtuseks on "DOM Sissejuhatus".
"DOM Sissejuhatus" ei ole <title> elemendi väärtus vaid tema tütar-liides.
HTML DOM Omadused ja Meetodid
Omadused ja meetodid määravad Html DOM programmeerimise kasutajaliidese.
DOM modelleerib Html'i liides-objektidega. Liidesele avatakse juurdepääs JavaScript'i v. mõne muu programmeerimis keele vahendusel.
Programmeerimise kasutajaliides DOM'is määratakse omaduste ja meetodite standarditega.
Html DOM Omadused
- x.innerHTML - sisemise teksti väärtus x (HTML element)
- x.nodeName - x nimetus e. nimi
- x.nodeValue - x väärtus
- x.parentNode - x juur-liides
- x.childNodes - x tütar-liides
- x.attributes - x atribuudi liides
Pane tähele:x on antud nimekirjas liidese objekt (HTML element).
Html DOM Meetodid
- x.getElementById(id) - elemendi saamine id abil
- x.getElementsByTagName(name) - kõikide elementide saamine täpsustatud märgise nimega
- x.appendChild(node) - tütar-liidese sisestamine x'i
- x.removeChild(node) - tütar-liidese eemaldamine x'ist
Pane tähele:x on antud nimekirjas liidese objekt (HTML element).
innerHTML
Kõige lihtsam moodus elemendi sisu muutmiseks on kasutada innerHTML omadust.
Näide:
JavaScript kood teksti saamiseks <p> elemendist id "intro" abil:
txt=document.getElementById("intro").innerHTML
Pärast lausungi käivitumist, txt hoiab endas väärtust "Tere Jälle!"
- document - käesolev html dokument
- getElementById("intro") - <p> element ja id "intro"
- innerHTML - Html elemendi sees olev tekst
Antud juhul, getElementByld on meetod ja innerHTML on omadus.
Proovi ise
childNode ja nodeValue
JavaScript kood teksti saamiseks <p> elemendist id "intro" abil:
txt=document.getElementById("intro").childNodes[0].nodeValue
Pärast lausungi käivitumist, txt hoiab endas väärtust "Tere Jälle!"
- document - käesolev html dokument
- getElementById("intro") - <p> element ja id "intro"
- childNodes[0] - <p> elemendi tütar-liides e. teksti-liides
- nodeValue - liidese väärtus (tekst ise)
