js 加載 xml 及遍歷屬性及內容 整理

 

以下例子為 加載xml 並讀取屬性及內容 

 

function  inidata()

{

var xmlDoc;
//加載xml
xmlDoc = loadXMLDoc("negativeData.xml");

var htmlstr = new Array();
//解析
var Negs = xmlDoc.getElementsByTagName("subNeg");
console.log("Negs" + Negs.length);
$(Negs).each(function (i, v) {
htmlstr = new Array();
var thead = '<li><div style="height:574px; margin-top:30px;" class="content mCustomScrollbar"><table> <thead><tr><th style="width: 10%; text-align: center;">序號</th><th style="width: 20%; text-align: center;">領域</th><th style="width: 70%; text-align: center;">特別管理措施</th></tr></thead>';
htmlstr.push(thead);
var category = v.attributes["cate"].textContent;
console.log(category);
console.log("category" + category);
htmlstr.push('<tr><td colspan="3" style="font-size:20px;">' + category + '</td></tr>');
var subs = v.getElementsByTagName("neg");
$(subs).each(function (si, sv) {
var orinfo = sv.attributes["ord"].textContent;
var cate = sv.attributes["cate"].textContent;
var text =sv.textContent;
htmlstr.push('<tr><td scope="row">' + orinfo + '</td><td scope="row">' + cate + '</td><td scope="row" style="padding:10px;">' + text + '</td></tr>');

});
htmlstr.push("</table></div></li>")
$("#datalist").append(htmlstr.join(''));

});

}

function loadXMLDoc(dname) {
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET", dname, false);
    xhttp.send("");
    return xhttp.responseXML;
}

 

附上xml結構

<?xml version="1.0" encoding="utf-8" ?>
<Negative>
<subNeg cate="一、農、林、牧、漁業">
<neg ord="（一）" cate="種業">

未經批准，禁止采集農作物種質資源。

</neg>
</subNeg>
</Negative>

 

總結為：

獲取xml某個父節點標志獲取其子節點 xmlparentnode.getElementsByTagName("neg")

遍歷子節點 獲取子節點屬性及內容 xmlobj.attributes['name'] 獲取xml 節點屬性對象 xmlobj.textContent

 

在做此功能時發現 xml讀取必須依賴IIS等網站發布環境 直接打開文件則瀏覽器識別xml的屬性方法報錯 不知何故？希望看到的大神能夠告訴我 非常感謝

 

完整demo 需要的 消息我 給我郵箱地址我發郵箱