Wikibooks

Programmeren in JavaScript/Het Document Object Model: verschil tussen versies

Interactief door geschiedenis bladeren
← Vorige wijzigingVolgende wijziging →
Verwijderde inhoud Toegevoegde inhoud
VisueelWikitekst
Vromelo (overleg | bijdragen)
144 bewerkingen
kGeen bewerkingssamenvatting
Vromelo (overleg | bijdragen)
144 bewerkingen
Tekst vervangen door "{{Programmeren in JavaScript}} ==De inhoud van dit deel== # Inleiding # [[Programmeren in JavaScript/Het..."
Regel 1:
{{Programmeren in JavaScript|deel=Het Document Object Model}}
== Inleiding ==
Het document object model is een model waarbij een HTML document wordt omgezet in een boomstructuur van objecten.
Als voorbeeld nemen we onze testpagina:
 
==De inhoud van dit deel==
{{Code
# [[Programmeren in JavaScript/Het Document Object Model/Inleiding|Inleiding]]
| Taal=HTML
# [[Programmeren in JavaScript/Het Document Object Model/Navigeren|Navigeren]]
| Titel=Een eenvoudige javascript testpagina
| Code=
<source lang=html4strict>
<!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, "&lt;");
t = t.replace(/>/g, "&gt;");
}
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 = "";
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>
</source>
}}
 
<noinclude>
Een HTML-element omvat alles vanaf zijn openingstag (bijvoorbeeld &lt;div&gt;) tot en met zijn sluittag (&lt;/div&gt;).
Een HTML-element kan dus tekst en andere HTML-elementen bevatten.
De bijbehorende boomstructuur van objecten ziet er als volgt uit:
 
==Overige==
[[Afbeelding:DOM boom van testpagina.PNG]]
* [[Programmeren in JavaScript/Objecten/Printversie|Printversie]]
</noinclude>
 
{{sub}}
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.
Elk knooppunt heeft een eigenschap ''childNodes'', een array die alle kinderen van document bevat.
 
Met javascript kunnen we elk van deze kinderen benaderen, bijvoorbeeld om informatie hierover af te drukken. U kunt dit zelf proberen door het script in de testpagina te plakken.
{{Code
| Taal=JavaScript
| Titel=De kinderen van het document
| Code=
<source lang="javascript">
 
for (i =0; i < document.childNodes.length; i++)
{
writeln(document.childNodes[0].nodeName);
}
</source>
}}
Als we dit op de testpagina uitproberen, zien we dat ''document'' twee kinderen heeft, beide met nodeName "html". Wat zou het verschil tussen beide nodes zijn? dat kunnen we zien aan een eigenschap van deze nodes, nl ''nodeType''. Laten we eens gaan kijken, en meteen vragen hoeveel kinderen elk van deze nodes heeft:
 
{{Code
| Taal=JavaScript
| Titel=Meer informatie over de kinderen van het document
| Code=
<source lang="javascript">
 
for (i =0; i < document.childNodes.length; i++)
{
var child = document.childNodes[i];
writeln("CHILD: " + child.nodeName + " (Type=" + child.nodeType + ") " + child.childNodes.length + " kinderen");
}
</source>
}}
De testpagina geeft uitsluitsel:
 
CHILD: html (Type=10) 0 kinderen
 
CHILD: HTML (Type=1) 2 kinderen
 
Hieronder de betekenis van nodeType:
 
{| class="prettytable"
!Element-type
!nodeType
|-
|HTML-element
|1
|-
|Attribuut van een HTML-element
|2
|-
|Tekst
|3
|-
|Commentaar
|8
|-
|Document
|9
|-
|Document-type
|10
|}
 
Het eerste object komt dus overeen met <!DOCTYPE html>.
Het tweede object is het HTML-element ''html'' hetgeen de rest van het document bevat.
 
We zien dat er op veel meer plaatsen tekst voorkomt dan we misschien verwachten. 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.
 
Met het onderstaande script kunnen we de afbeelding verder controleren. Het plaatje wijkt op één plaats af van het HTML-document. Probeer die plaats te vinden.
 
{{Code
| Taal=JavaScript
| Titel=Informatie over andere nodes
| Code=
<source lang="javascript">
function elementInfo(element)
{
writeln("PARENT: " + element.nodeName + " (Type=" + element.nodeType + ") " + element.childNodes.length + " kinderen");
for (i =0; i < element.childNodes.length; i++)
{
var child = element.childNodes[i];
writeln("CHILD: " + child.nodeName + " (Type=" + child.nodeType + ") " + child.childNodes.length + " kinderen");
}
writeln("~~~");
}
 
elementInfo(document);
elementInfo(document.childNodes[1]);
elementInfo(document.childNodes[1].childNodes[0]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[0]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[1]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[2]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[3]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[3].childNodes[0]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[4]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[5]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[5].childNodes[0]);
elementInfo(document.childNodes[1].childNodes[0].childNodes[6]);
elementInfo(document.childNodes[1].childNodes[1]);
elementInfo(document.childNodes[1].childNodes[1].childNodes[0]);
elementInfo(document.childNodes[1].childNodes[1].childNodes[1]);
elementInfo(document.childNodes[1].childNodes[1].childNodes[2]);
elementInfo(document.childNodes[1].childNodes[1].childNodes[3]);
elementInfo(document.childNodes[1].childNodes[1].childNodes[4]);
elementInfo(document.childNodes[1].childNodes[1].childNodes[6]);
</source>
}}
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.