参考:
JavaScript操作XML
01.html文件内容:
<table border="1" cellpadding="2" align="center">
<caption>
使用DOM显示XML文档
</caption>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>民族</td>
<td>籍贯</td>
<td>专业</td>
</tr>
<script type="text/javascript">
var xmlFileName = "01File.xml";
var filePath = location.href.substring(0, location.href.lastIndexOf("/")+1); //当前文件01.html的绝对路径
var path = filePath + xmlFileName; //01File.xml的完整路径, 即file:///H:/长安/01File.xml
//所读取xml文件
var xmlDoc = getXmlDoc(path);
//var stuList = xmlDoc.getElementsByTagName("student"); //非IE
var stuList = xmlDoc.documentElement.getElementsByTagName("student"); // IE
for (var i = 0; i < stuList.length; i++) {
document.write("<tr>");
var subList = stuList[i].childNodes;
for (var j = 0; j < subList.length; j++) {
document.write("<td>" + subList[j].text + "</td>");
}
document.write("</tr>");
}
//获取xmlDoc对象,兼容浏览器
function getXmlDoc (xmlFileName) {
var xmlDoc;
//var xmlDoc = '';
if (window.ActiveXObject) { // IE
var activeXNameList = new Array("MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XMLDOM","MSXML.DOMDocument");
for (var h = 0; h < activeXNameList.length; h++) {
try {
xmlDoc = new ActiveXObject(activeXNameList[h]); //建立 XML DOM 对象
} catch(e) {
continue;
}
if (xmlDoc) break;
}
}
//else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //火狐
else if (document.implementation && document.implementation.createDocument){ //非 IE
xmlDoc = document.implementation.createDocument('', '', null);
}
//else { //谷歌
// var xmlhttp = new window.XMLHttpRequest();
// xmlhttp.open("GET", xmlFileName, false);
// xmlhttp.send(null);
// if (xmlhttp.readyState == 4) {
// xmlDoc = xmlhttp.responseXML.documentElement;
// }
//}
else {
alert('不能创建 XML DOM对象,请更新你的浏览器……');
}
xmlDoc.async = false; //设置加载方式,异步(推荐)或同步。等待文件加载完
xmlDoc.load(xmlFileName); //提供XML文件URL然后调用 load 方法,加载XML
return xmlDoc;
}
</script>
</table>
01File.xml文件内容:
<?xml version="1.0" encoding="utf-8"?>
<students>
<student>
<sn>20040112</sn>
<name>张三</name>
<sex>男</sex>
<nation>汉族</nation>
<add>山东</add>
<pro>计算机</pro>
</student>
<student>
<sn>20040201</sn>
<name>李四</name>
<sex>女</sex>
<nation>汉族</nation>
<add>山东</add>
<pro>计算机</pro>
</student>
<student>
<sn>20031514</sn>
<name>王五</name>
<sex>女</sex>
<nation>汉族</nation>
<add>山东</add>
<pro>计算机</pro>
</student>
<student>
<sn>20031514</sn>
<name>赵六</name>
<sex>女</sex>
<nation>汉族</nation>
<add>山东</add>
<pro>计算机</pro>
</student>
</students>