Javascript操作xml小小showcase:xml转换为table

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE >  New Document  </ TITLE >
< META  NAME ="Generator"  CONTENT ="EditPlus" >
< META  NAME ="Author"  CONTENT ="" >
< META  NAME ="Keywords"  CONTENT ="" >
< META  NAME ="Description"  CONTENT ="" >
< script  language ="javascript"  type ="text/javascript" >
var xDoc;
// verify that browser supports XML features and load external .xml file
//this method is from other people's :)
function verifySupport(xFile) {
    if (document.implementation && document.implementation.createDocument) {
        // this is the W3C DOM way, supported so far only in NN6+
        xDoc = document.implementation.createDocument("", "theXdoc", null);
    } else if (typeof ActiveXObject != "undefined") {
        // make sure real object is supported (sorry, IE5/Mac)
        if (document.getElementById("msxml").async) {
            xDoc = new ActiveXObject("Msxml.DOMDocument");
        }
    }
    if (xDoc && typeof xDoc.load != "undefined") {
        // load external file (from same domain)
        xDoc.load(xFile);
        return true;
    } else {
        var reply = confirm("This example requires a browser with XML support, " +
            "such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
        if (reply) {
            history.back( );
        }
    }
    return false;
}

function init(xFile) {
    // confirm browser supports needed features and load .xml file
    if (verifySupport(xFile)) {
        drawTable('matchData');
    }
}
function drawTable(tbody) {
    var tr, td, i, j, oneRecord;
    tbody = document.getElementById(tbody);
    // node tree
    var data = xDoc.getElementsByTagName("Data")[0];
    // for td class attributes
    var classes = ["ctr","","","","ctr"];
    for (i = 0; i < data.childNodes.length; i++) {
        // use only 1st level element nodes to skip 1st level text nodes in NN
        if (data.childNodes[i].nodeType == 1) {
            // one final match record
            oneRecord = data.childNodes[i];
            tr = tbody.insertRow(tbody.rows.length);
            td = tr.insertCell(tr.cells.length);
            td.setAttribute("class",classes[tr.cells.length-1]);
            td.innerHTML = 
              oneRecord.getElementsByTagName("N001")[0].firstChild.nodeValue;
            td = tr.insertCell(tr.cells.length);
            td.setAttribute("class",classes[tr.cells.length-1]);
            td.innerHTML = 
               oneRecord.getElementsByTagName("N002")[0].firstChild.nodeValue;
            td = tr.insertCell(tr.cells.length);
            td.setAttribute("class",classes[tr.cells.length-1]);
            td.innerHTML = 
               oneRecord.getElementsByTagName("N003")[0].firstChild.nodeValue;
        }
    }
}
</ script >
</ HEAD >

< BODY  onload ="init('index.xml');" >

< table  id ="cupFinals" >
< thead >
< tr >< th > NODE1 </ th >
     < th > NODE2 </ th >
     < th > NODE3 </ th >
</ tr >
</ thead >
< tbody  id ="matchData" ></ tbody >
</ table >
<!--  Try to load Msxml.DOMDocument ActiveX to assist support verification  -->
< object  id ="msxml"  width ="1"  height ="1"  
    classid ="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60"   ></ object >
</ BODY >
</ HTML >

XML file:

<? xml version="1.0" encoding="gb2312" ?>
< Datas >
     < Data >
<!-- 大循环的名称 -->
         < Title >
             < N001 > 去掉HTML的第一段文字 </ N001 >
             < N002 > 去掉HTML的第二段文字 </ N002 >
             < N003 > 去掉HTML的第三段文字 </ N003 >
         </ Title >
         < Title >
             < N001 > 去掉HTML的第一段文字 </ N001 >  
             < N002 > 去掉HTML的第二段文字 </ N002 >
             < N003 > 去掉HTML的第三段文字 </ N003 >
         </ Title >
     </ Data >
</ Datas >