Programmeren in JavaScript/Het Document Object Model/Inleiding
JavaScript wordt gebruikt om het gedrag van een webpagina te beschrijven. Daarom moet het mogelijk zijn vanuit JavaScript veranderingen aan de HTML-code aan te brengen.
Binnen JavaScript is de HTML-code toegankelijk gemaakt door middel van een object genaamd document. Het object document is een zogenaamd host object, dat wil zeggen dat het een onderdeel is van de browser. Later zullen we zien dat er (helaas) kleine verschillen zijn tussen de objecten document in verschillende browsers.
Het document object model (afkorting: DOM) is een model waarbij een HTML document wordt omgezet in een boomstructuur van objecten.
Als voorbeeld nemen we onze testpagina:
HTML-code: Een eenvoudige javascript testpagina
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>javascript tester</title>
<script>
function writeln(s)
{
var writespace = document.getElementById("writespace");
var t = "" + s;
if ((t != undefined) || (t != null))
{
t = t.replace(/</g, "<");
t = t.replace(/>/g, ">");
}
writespace.innerHTML = writespace.innerHTML + t + "<br />";
}
function write(s)
{
var writespace = document.getElementById("writespace");
var t = "" + s;
writespace.innerHTML = writespace.innerHTML + t;
}
function onRunButtonClicked()
{
var writespace = document.getElementById("writespace");
writespace.innerHTML = "";
var codespace = document.getElementById("codespace");
var s = codespace.value;
s = s.replace(/document.write/g, "write");
eval(s);
}
</script>
</head>
<body>
<textarea id="codespace" style="width:100%;height:250px;">//zet hier uw javascript</textarea>
<button type="button" onclick="onRunButtonClicked()">Uitvoeren</button>
<div id="writespace" style="margin:0px;padding:0px;height:250px;overflow:scroll;border:1px solid black;font-family:'Courier New', Courier, monospace;font-size:80%;">Hier komt de uitvoer van het javascript</div>
</body>
</html>
Een HTML-element omvat alles vanaf zijn openingstag (bijvoorbeeld <div>) tot en met zijn sluittag (</div>). Een HTML-element kan dus tekst en andere HTML-elementen bevatten. De bijbehorende boomstructuur van objecten ziet er als volgt uit:
In de boom wordt bijvoorbeeld document de ouder (parent) van html genoemd en head de ouder van script. Verder worden head en body kinderen (children) van html genoemd en heeft head zeven kinderen.
Elk knooppunt in de boom is een object met eigenschappen en methoden.
Misschien vind je dat er op veel meer plaatsen tekst voorkomt dan je verwacht. Voornamelijk zijn dat dan spaties e.d. die welliswaar niet op het scherm getoond worden, maar wel in het HTML-document voorkomen en dus ook in de boom.
De attributen van HTML-elementen zijn in het plaatje niet weergegeven maar zijn wel degelijk onderdeel van de boom. Elk attribuut vormt weer een object en is opgehangen aan het object dat het bijbehorende HTML-element vertegenwoordigd (zie later).