The childNodes property of an element returns a Nodelist of child nodes for the document. The node list can be traversed to get all the values of the nodes.

The example below demonstrates displaying a nodeName, nodeType and nodeValue for all the nodes of the document. The nodes can be displayed using two for loops of JavaScript to traverse through the child nodes of all elements. It can also be displayed using getElementsByTag() method and select each node to display it’s content.

Example of childNodes property

element.xml

<?xml version='1.0'?>

<root>

      <!--Comment 1-->

    <data>

        <animal>Lion</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Carnivore</eatingHabit>

    </data>

      <!--Comment2 -->

      <data>

        <animal>Deer</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Herbivore</eatingHabit>

    </data>

</root>

element.html

<!DOCTYPE html>

<html>

      <body>

            <script>

            function loadFile(name){

                   if (window.XMLHttpRequest)

                   {// code for IE7+, Firefox, Chrome, Opera, Safari

                        xmlhttp = new XMLHttpRequest();

                   }

                   else

                   {// code for IE6, IE5

                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                   }

                  xmlhttp.open("GET",name,false);

                  xmlhttp.send();

                  return xmlhttp.responseXML;

 

            }

           

            xmlDoc = loadFile("element.xml");  

            document.write("Nodename: " + xmlDoc.nodeName + "  nodetype: " + xmlDoc.nodeType +"  Value: " + xmlDoc.nodeValue);

           

            c = xmlDoc.documentElement;

            document.write("<br/>Root node: " + c.nodeName +"  nodetype: " + xmlDoc.nodeType + "  Value: " + c.nodeValue);

           

            d = c.childNodes;

           

            for(i=0; i<d.length; i++){

                 

                  document.write("<br/>Node: " + d[i].nodeName + "  nodetype: " + d[i].nodeType +"  Value: " + d[i].nodeValue);

                 

                  k = d[i].childNodes;

                  for(j=0; j<k.length; j++){

                        if(k[j].nodeType!=3)    {

                              document.write("<br/>Node: " + k[j].nodeName + "  nodetype: " + k[j].nodeType +"  Value: " + k[j].childNodes[0].nodeValue);

                        }                      

                  }

 

            }    

     

      </script>

      </body>

</html>

Output of the example above:

Nodename: #document nodetype: 9 Value: null
Root node: root nodetype: 9 Value: null
Node: #text nodetype: 3 Value: 
Node: #comment nodetype: 8 Value: Comment 1
Node: #text nodetype: 3 Value: 
Node: data nodetype: 1 Value: null
Node: animal nodetype: 1 Value: Lion
Node: habitat nodetype: 1 Value: jungle
Node: type nodetype: 1 Value: mammal
Node: eatingHabit nodetype: 1 Value: Carnivore
Node: #text nodetype: 3 Value: 
Node: #comment nodetype: 8 Value: Comment2 
Node: #text nodetype: 3 Value: 
Node: data nodetype: 1 Value: null
Node: animal nodetype: 1 Value: Deer
Node: habitat nodetype: 1 Value: jungle
Node: type nodetype: 1 Value: mammal
Node: eatingHabit nodetype: 1 Value: Herbivore
Node: #text nodetyp

 

›› go to examples ››