I am new to hacking javascript and this forum.

I am trying to build a jsTree engine that parses an XML file, allows the user to modify the attribute values and then write this back to the server.

I have building the function across several different scripts to get a understanding if what's going on.

I am currently having an issue with the case of an attribute when I break out my xml node list. It always seems to be automatically set to lowercase.

On the w3schools site I found this property styles.textTransform = "none", but I cant seem to apply it, in the correct place (see comments for where I tried).

Is this what I should be using?

I have attached my example code, it should be a complete example. It should produce an output that looks like the following,

Starting here

Ending here

I am using Chrome as my browser, is there a way I can search all the properties of the xml2 variable, using the inbuilt debugging features?


HTML Code:
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="tabs.css">
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
var xml2 = '<root><objects><pgExe1><REF enablecomms="0" objType="pglite" objectState="initial" startupSleep="10"><command TargetId="1" buoyId="001" dspExePath="../v2.13/pg_dsp.out" exeName="pg_gpp" path="../v2.13/" scriptName="shPgLite.exe" xmlPath="../pbXmlConfigs/pb-xxx-20120913_135459.xml"/><comms enable="0" host="localhost" maxlength="1024" port="1999" proto="udp" status="0" timeout="5"/><statusReboot pgController="" rebootCount="0" rebootEnable="1" rebootThreshold="3" rebootTimeout="0"/></REF></pgExe1></objects></root>';
var html = [];

function traverse(tree, printString) {
    $(tree).contents().each(function() {
      printString = printString + '.' + this.nodeName;
      //html.push(this.nodeType + this.nodeName + '<br>');
      if (this.nodeType == 3) { // text node
        html.push('---'+$(this).text()+ '<br>');
      } else {
        if (this.nodeType == 2) { // attribute node
          // node value: $(this).text() or this.nodeValue
        html.push('+++'+$(this).attr()+ '<br>');
        } else {
          if(this.attributes.length > 0){
            //html.push('==='+this.nodeName + ': ' + this.attributes.length + ' ~ <br>');
            for( var iCnt = 0; iCnt < this.attributes.length; iCnt++){
              //this.attributes[iCnt].nodeName.styles.textTransform = "none";
              //this.textTransform = "none";
              //html.push(printString + iCnt + '  ' + this.attributes[iCnt].nodeName + ' ' + this.attributes[iCnt].nodeValue + ' ~ <br>');
              html.push(printString + '.' + this.attributes[iCnt].nodeName + '="' + this.attributes[iCnt].nodeValue + '"<br>');
          traverse(this, printString);

function createPage(obj) {
  html.push('Starting here');
  //xml2.styles.textTransform = "none";

  traverse(xml2, '');
  html.push('<br>Ending here');
window.onload = createPage();