Can't display XML element name using Javascript

I have an HTML5 file with javascript to read in a local XML file.

One element in the XML structure is dynamic and contains inner xml, no value.

When trying to display this nodename on the webpage all I see is #text.

Example XML:

<Students>
    <student id="1">
        <Connor>
           <age>20</age>
           <gender>male</gender>
        </Connor>
    </student>
    <student id="2">
        <Fiona>
           <age>25</age>
           <gender>female</gender>
        </Fiona>
    </student>
</Students>

Javascript:

var x = xmlDoc.getElementsByTagName("student");

for(i = 0; i < x.length; i++)
{
    var id = x[i].getAttribute("id");

    var name = x[i].childNodes[0].nodeName;        // produces '#text'
    // var name = x[i].firstChild.nodeName;        // produces '#text'   

    document.write("<p>name = " + x[i].childNodes[0].nodeName + "</p>");  // produces '#text'

    var age = x[i].getElementsByTagName("age")[0].childNodes[0].nodeValue;
    var gender = x[i].getElementsByTagName("gender")[0].childNodes[0].nodeValue;

    var student= {id:id, name:name, age:age, gender:gender };
}

In my XML example I understand that the name of the student could be better stored but this is just an example based on a fixed XML structure I'm working with.

Furthermore: reading and displaying the XML file only works whilst running through the IDE. I would eventually like to be able to run the .html file and have the javascript code read the xml file (stored in the same location as the html file) and displays its data.