Programmeren in JavaScript/Het Document Object Model/Navigeren
Elke knooppunt (node) in de DOM-boom is een object. Elk knooppunt heeft een eigenschap childNodes, een array dat alle kinderen van een node 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.
JavaScript-code: De kinderen van het document
for (i =0; i < document.childNodes.length; i++)
{
writeln(document.childNodes[i].nodeName);
}
Als we dit op de testpagina uitproberen, zien we dat document twee kinderen heeft, beide met nodeName "html". De eigenschap nodetype (een getal) geeft aan wat het verschil tussen beide nodes is.
| Element-type | nodeType |
|---|---|
| HTML-element | 1 |
| Attribuut van een HTML-element | 2 |
| Tekst | 3 |
| Commentaar | 8 |
| Document | 9 |
| Document-type | 10 |
Laten we eens gaan kijken wat het nodeType van deze nodes is en meteen vragen hoeveel kinderen elk van deze nodes heeft:
JavaScript-code: Meer informatie over de kinderen van het document
for (i =0; i < document.childNodes.length; i++)
{
var child = document.childNodes[i];
writeln("CHILD: " + child.nodeName + " (Type=" + child.nodeType + ") " + child.childNodes.length + " kinderen");
}
De testpagina geeft uitsluitsel:
CHILD: html (Type=10) 0 kinderen
CHILD: HTML (Type=1) 2 kinderen
Het eerste object komt dus overeen met <!DOCTYPE html>. Het tweede object is het HTML-element html hetgeen de rest van het document bevat.
Met het onderstaande script kunnen we de afbeelding in de inleiding verder controleren.
JavaScript-code: Informatie over andere nodes
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);
var html_element = document.childNodes[1];
elementInfo(html_element);
writeln(html_element.childNodes.length);
for (j = 0; j < html_element.childNodes.length; j++)
{
var child = html_element.childNodes[j];
elementInfo(child);
for (k = 0; k < child.childNodes.length; k++)
{
var grandchild = child.childNodes[k];
if (grandchild.id == "writespace") continue;
elementInfo(grandchild);
}
}
Informatie over het HTML-element met id "writespace" laten we NIET zien, want het aantal kinderen van dit element neemt toe met elke regel uitvoer die het script produceert, waardoor het script niet meer uit zich zelf zou stoppen.
Als u in de gelegenheid bent kunt u dit script ook eens in andere browsers proberen uit te voeren. Merk op dat er verschillen zijn, vooral tussen IE7, IE8 en IE9 !!!