DOM方式解析XML

XML代码:
 <students>
 <student>
  <name>李四</name>
  <age>21</age>
  <gender>男</gender>
  <classNo>20140101</classNo>
  <schoolName>齐鲁工业大学</schoolName>
  <nation>汉族</nation>
  <address>山东济南</address>
 </student>
 <student>
  <name>王五</name>
  <age>21</age>
  <gender>男</gender>
  <classNo>20140101</classNo>
  <schoolName>山东交通学院</schoolName>
  <nation>汉族</nation>
  <address>山东临沂</address
 </student>
 <student
  <name>赵六</name>
  <age>21</age>
  <gender>男</gender>
  <classNo>20140101</classNo>
  <schoolName>山东大学</schoolName>
  <nation>汉族</nation>
  <address>山东济南</address>
 </student>
 <student>
  <name>戴七</name>
  <age>21</age>
  <gender>男</gender>
  <classNo>20140101</classNo>
  <schoolName>齐鲁工业大学5</schoolName>
  <nation>汉族</nation>
  <address>山东临沂</address>
 </student>
</students>



解析文档: 
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>解析XML</title>
  <script>
   function check() { //加载文件,并对其进行解析
    var xmlDoc = null;
    if (window.ActiveXObject) {
     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    } else {
     xmlDoc = document.implementation.createDocument("", "", null);
    }
    xmlDoc.async = false;
    xmlDoc.load("./student.xml"); //开始解析文件
    var students = xmlDoc.getElementsByTagName("students")[0].nodeName; //获取根元素
    var studentArray= xmlDoc.getElementsByTagName("student");
    for (var i=0;i<studentArray.length;i++){
     var student=studentArray[i];
     var name=student.getElementsByTagName("name")[0].innerHTML;
     var age=student.getElementsByTagName("age")[0].innerHTML;
     var gender=student.getElementsByTagName("gender")[0].innerHTML;
     var classNo=student.getElementsByTagName("classNo")[0].innerHTML;
     var nation=student.getElementsByTagName("nation")[0].innerHTML;
     var schoolname=student.getElementsByTagName("schoolName")[0].innerHTML;
     var address=student.getElementsByTagName("address")[0].innerHTML;
     insert(name,age,gender,classNo,nation,schoolname,address);
    }
   }
   function insert(name,age,gender,classNo,nation,schoolname,address){
    var table=document.getElementById("tab1");
    var tr=document.createElement("tr");
    var td=document.createElement("td");
    var td1=document.createElement("td");
    var td2=document.createElement("td");
    var td3=document.createElement("td");
    var td4=document.createElement("td");
    var td5=document.createElement("td");
    var td6=document.createElement("td");
    td.innerHTML=name;
    td1.innerHTML=age;
    td2.innerHTML=gender;
    td3.innerHTML=classNo;
    td4.innerHTML=nation;
    td5.innerHTML=schoolname;
    td6.innerHTML=address;
    tr.appendChild(td);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    tr.appendChild(td5);
    tr.appendChild(td6);
    table.appendChild(tr);
    
   }
  </script>
  <style>
   td{
    border:1px solid black;
   }
  </style>
 </head>
 <body>
  <div align="center">
   <table style="border: 1px solid black; width: 80%; border-collapse: collapse;" id="tab1">
    <tr>
     <td>姓名</td>
     <td>年龄</td>
     <td>性别</td>
     <td>班级</td>
     <td>学校</td>
     <td>民族</td>
     <td>家庭住址</td>
    </tr>
   </table>
   <input type="button" value="提交" onclick="check()">
  </div>
 </body>
</html>

你可能感兴趣的:(DOM方式解析XML)