| Inhoudsopgave |
Elke knooppunt (node) in de DOM-boom is een object.Elk knooppunt heeft een eigenschapchildNodes, 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 detestpagina 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 detestpagina uitproberen, zien we datdocument twee kinderen heeft, beide met nodeName "html". De eigenschapnodetype (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++){varchild=document.childNodes[i];writeln("CHILD: "+child.nodeName+" (Type="+child.nodeType+") "+child.childNodes.length+" kinderen");}
Detestpagina 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-elementhtml 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
functionelementInfo(element){writeln("PARENT: "+element.nodeName+" (Type="+element.nodeType+") "+element.childNodes.length+" kinderen");for(i=0;i<element.childNodes.length;i++){varchild=element.childNodes[i];writeln("CHILD: "+child.nodeName+" (Type="+child.nodeType+") "+child.childNodes.length+" kinderen");}writeln("~~~");}elementInfo(document);varhtml_element=document.childNodes[1];elementInfo(html_element);writeln(html_element.childNodes.length);for(j=0;j<html_element.childNodes.length;j++){varchild=html_element.childNodes[j];elementInfo(child);for(k=0;k<child.childNodes.length;k++){vargrandchild=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 !!!