JS读取Xml文件节点属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
table,tr,td {
background-position: center;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
border-color: blue;
text-align: center;
font-size: 20px;
}
table {
width: 600px;
margin-bottom: 10px;
}
tr {
height: 30px;
}
.bordertyle {
font-family: sans-serif;
text-align: center;
}

.btn {
margin-left: 30px;
margin-right: 30px;
}
label {
font-size: 20px;
font-family: sans-serif;
}
</style><script language="javascript" type="text/javascript"> //***********js操作XML*************
//* author:luobin *
//* Email:[email protected] *
//*********************************
/*
function loadXML(xmlFile){
var xmlDoc;
if(!window.ActiveXObject){
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlFile,"text/xml");
}else{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
*/
//针对两种浏览器，分别获取xmlDocument对象
function   loadXML(xmlFile) 
    { 
var xmlDoc;
if(window.ActiveXObject) { 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
xmlDoc.async=false;
xmlDoc.load(xmlFile);
}
else if(document.implementation&&document.implementation.createDocument){ 
xmlDoc=document.implementation.createDocument( "", "",null); 
xmlDoc.async=false;
xmlDoc.load(xmlFile);
} else{
alert('Your   browser   cannot   handle   this   script'); 
}
return xmlDoc;
} var xmlDoc = loadXML("custInfo.xml"); var members = xmlDoc.getElementsByTagName("custNo");
var maxRes = members.length;

var pageShow = 5;
var currentPage = 1;

var maxPage = Math.ceil(maxRes/pageShow);

//此方法只能在body标签中或后调用
function retrieve(){
var oDiv = document.createElement("div");
oDiv.id = "showhtml"
oDiv.className = "bordertyle";
if(maxRes){
var oTable = generateTable(oDiv,(currentPage-1)*pageShow,currentPage*pageShow); var pageInf = document.createElement("div");

var oLabel = document.createElement("label");
oLabel.innerHTML = "共条"+maxRes+"记录,当前第";
pageInf.appendChild(oLabel); var curLabel = document.createElement("label");
curLabel.innerHTML = currentPage;
curLabel.setAttribute("id","curLabel");
pageInf.appendChild(curLabel); var oLabel3 = document.createElement("label");
oLabel3.innerHTML = "页,共"+maxPage+"页";
pageInf.appendChild(oLabel3);

oDiv.appendChild(pageInf);

var buttonSet = document.createElement("div")
buttonSet.className = "bordertyle"; var firstBtn = document.createElement("button");
firstBtn.innerHTML = "首页";
firstBtn.id = "firstBtn";
firstBtn.className = "btn";
firstBtn.onclick = function(){
goToPage(1,oTable,curLabel);
};
buttonSet.appendChild(firstBtn);

var preBtn = document.createElement("button");
preBtn.id = "preBtn";
preBtn.innerHTML = "前一页";
preBtn.className = "btn";
preBtn.onclick = function(){
if(currentPage>1){
goToPage(currentPage-1,oTable,curLabel);
}
};
buttonSet.appendChild(preBtn); var tx = document.createElement("input");
tx.value = currentPage;
tx.id = "tx";
tx.size = "2";
buttonSet.appendChild(tx);
var goBtn = document.createElement("button");
goBtn.innerHTML = "GO";
goBtn.onclick = function(){
var txPage = parseInt(tx.value);
goToPage(txPage,oTable,curLabel);
}
buttonSet.appendChild(goBtn);

var nextBtn = document.createElement("button");
nextBtn.innerHTML = "下一页";
nextBtn.id = "nextBtn";
nextBtn.className = "btn";
nextBtn.onclick = function(){
if(currentPage<maxPage){
goToPage(currentPage+1,oTable,curLabel);
}
};
buttonSet.appendChild(nextBtn); var lastBtn = document.createElement("button");
lastBtn.innerHTML = "末页";
lastBtn.id = "lastBtn";
lastBtn.className = "btn";
lastBtn.onclick = function(){
goToPage(maxPage,oTable,curLabel);
};
buttonSet.appendChild(lastBtn); oDiv.appendChild(buttonSet);
}else{
oDiv.innerHTML = "无记录";
}
document.body.appendChild(oDiv);
alterButton();//先把oDiv加到body之后才可调用，害我犯了错误
} function generateTable(oDiv,start,end){
var oTable = document.createElement("table");
generateTableHead(oTable);
generateTableContent(oTable,start,end);
oDiv.appendChild(oTable);
return oTable;
} function generateTableHead(oTable){
var oTr = oTable.insertRow(-1); var oTd = oTr.insertCell(-1);
oTd.innerHTML = "姓名";//ie支持innerText，ff支持textContent 这里就偷懒的写法，改成innerHTML
/**
if(oTd.innerText){
oTd.innerText = "name";
}else{
oTd.textContent = "name";
}
**/

var oTd2 = oTr.insertCell(-1);
oTd2.innerHTML = "性别";

var oTd3 = oTr.insertCell(-1);
oTd3.innerHTML = "生日";

var oTd4 = oTr.insertCell(-1);
oTd4.innerHTML = "会员编号";
} function generateTableContent(oTable,start,end){
end = (end>maxRes)?maxRes:end;
for(var i=start;i<end;i++){
var oTr = oTable.insertRow(-1);//ff中insertRow必须加上参数，而ie默认为-1
oTr.id = members[i].getAttribute("id");

var oTd = oTr.insertCell(-1);
var oName = members[i].getElementsByTagName("name");
oTd.innerHTML = oName[0].firstChild.nodeValue;//刚开始用的oName[0].text,不兼容ff，现在统一替换成oName[0].firstChild.nodeValue

var oTd2 = oTr.insertCell(-1);
var oLoginName = members[i].getElementsByTagName("sex");
oTd2.innerHTML = oLoginName[0].firstChild.nodeValue;

var oTd3 = oTr.insertCell(-1);
var birthday = members[i].getElementsByTagName("birthday");
//获取生日
//var custBir_year=birthday[i].getAttribute("year");
/*var custBir_month=birthday[i].getAttribute("month");
var custBir_day=birthday[i].getAttribute("day");

var birStr=custBir_year+"-"+custBir_month+"-"+custBir_day;*/
 //document.write(birthday[0].firstChild.nodeValue);
oTd3.innerHTML ="";
//oTd3.innerHTML ="<span>"+birStr+"</span>";
//会员编号
var oTd4 = oTr.insertCell(-1);
oTd4.innerHTML =oTr.id;
}
} function removeTableContent(oTable){
if(oTable.rows.length>1){
for(var i=oTable.rows.length-1;i>=1;i--){
oTable.deleteRow(i);
}
}
} function alterButton(){
preBtn.disabled = (currentPage<=1)?true:false;
nextBtn.disabled = (currentPage>=maxPage)?true:false;
firstBtn.disabled = (currentPage==1)?true:false;
lastBtn.disabled = (currentPage==maxPage)?true:false;
} function goToPage(page,oTable){
//此处还要加个正则表达式校验page是数字，js的正则表达式还不会有待进一步学习
if(page<1){
window.alert("您输入的页数小于等于0,请输入一个0到"+maxPage+"的整数");
return;
}
if(page>maxPage){
window.alert("您输入的页数超过了最大页数,请输入一个0到"+maxPage+"的整数");
return;
}
removeTableContent(oTable);
currentPage = page;
var start = (currentPage-1)*pageShow;
var end = currentPage*pageShow;
tx.value = currentPage;
curLabel.innerHTML = currentPage;
generateTableContent(oTable,start,end);
alterButton();
}

</script>
<script type="text/javascript">
</script>
</HEAD>
<BODY>
<!--<script type="text/javascript">
retrieve();
</script>-->
<input name="" type="button" onClick="retrieve()" value="获取信息">
</BODY>
</HTML>xml文件：text.xml
<?xml version="1.0" encoding="GB2312"?>
<rautinee>
<member id='1'> 
<name>海仔</name>
<loginName>rautinee</loginName>
<email>[email protected]</email></member>
<member id='2'>
<name>刚强</name>
<loginName>hehe</loginName>
<email>[email protected]</email></member>
<member id='3'>
<name>金华刚</name>
<loginName>nature_it</loginName>
<email>[email protected]</email></member>
<member id='4'>
<name>的简强</name>
<loginName>tank</loginName>
<email>[email protected]</email></member>
<member id='7'>
<name>合资</name>
<loginName>kaka</loginName>
<email>[email protected]</email></member>
<member id='6'>
<name>加个人</name>
<loginName>apple</loginName>
<email>[email protected]</email></member>
<member id='8'>
<name>null</name>
<loginName>sunny</loginName>
<email>[email protected]</email></member>
<member id='10'>
<name>宝贝</name>
<loginName>index</loginName>
<email>[email protected]</email></member>
<member id='12'>
<name>login</name>
<loginName>login</loginName>
<email>[email protected]</email></member>
<member id='13'>
<name>jiang</name>
<loginName>123</loginName>
<email>[email protected]</email></member>
<member id='14'>
<name>world</name>
<loginName>world</loginName>
<email>[email protected]</email></member>
<member id='15'>
<name>swallow</name>
<loginName>swallow</loginName>
<email>[email protected]</email></member>
<member id='16'>
<name>魏格</name>
<loginName>hotmail</loginName>
<email>[email protected]</email></member>
<member id='17'>
<name>wrong</name>
<loginName>wrong</loginName>
<email>[email protected]</email></member>
<member id='18'>
<name>leah</name>
<loginName>leah</loginName>
<email>[email protected]</email></member>
<member id='19'>
<name>ttth</name>
<loginName>ttth</loginName>
<email>[email protected]</email></member>
</rautinee>

解决方案 »

  1.   

    读取的xml文件：
    <?xml version="1.0" encoding="GB2312"?>
    <rautinee>
      <custNo id='1'>
        <name>周杰伦</name>
        <sex>男</sex>
        <birthday year='1989' month='11' day='11'>1989-11-30</birthday>
      </custNo>
      <custNo id='2'>
        <name>王宝强</name>
        <sex>男</sex>
        <birthday year='1979' month='1' day='11'></birthday>
      </custNo>
      <custNo id='3'>
        <name>李玉刚</name>
        <sex>男</sex>
        <birthday year='1979' month='8' day='15'></birthday>
      </custNo>
      <custNo id='4'>
        <name>赵本山</name>
        <sex>男</sex>
        <birthday year='1999' month='8' day='14'></birthday>
      </custNo>
      <custNo id='5'>
        <name>王力宏</name>
        <sex>男</sex>
        <birthday year='1969' month='12' day='19'></birthday>
      </custNo>
      <custNo id='6'>
        <name>蔡依林</name>
        <sex>女</sex>
        <birthday year='1959' month='11' day='1'>[email protected]</birthday>
      </custNo>
      <custNo id='7'>
        <name>西城男孩</name>
        <sex>男</sex>
        <birthday year='1949' month='7' day='1'></birthday>
      </custNo>
      <custNo id='8'>
        <name>宋祖英</name>
        <sex>女</sex>
        <birthday year='1989' month='11' day='6'></birthday>
      </custNo>
      <custNo id='9'>
        <name>班得瑞</name>
        <sex>男</sex>
        <birthday year='1989' month='5' day='11'></birthday>
      </custNo>
      <custNo id='10'>
        <name>凤凰传奇</name>
        <sex>男</sex>
        <birthday year='1989' month='5' day='11'></birthday>
      </custNo>
    </rautinee>不能获取birthday 节点的属性 year、month、day=
      

  2.   

    本帖最后由 net_lover 于 2011-12-10 16:29:55 编辑
      

  3.   

    哦 谢谢 这是我之前获取的方式，难怪一直不对呢！var custBir_year=birthday[i].getAttribute("year");
    var custBir_month=birthday[i].getAttribute("month");
    var custBir_day=birthday[i].getAttribute("day");
    var birStr=custBir_year+"-"+custBir_month+"-"+custBir_day
    oTd3.innerHTML =birStr;