Programmeren in JavaScript/Het Document Object Model/Navigeren

Uit Wikibooks
Naar navigatie springen Naar zoeken springen

Programmeren in JavaScript

Inhoudsopgave
  1. Inleiding
  2. Navigeren
  3. Zoeken

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 !!!

Informatie afkomstig van http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.