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