js 加载 xml 及遍历属性及内容 整理

本文旨在： js加载xml文件并读取节点信息

 1 加载xml文件 

var xmlDoc = loadXMLDoc("negativeData.xml");

 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;
 }

2  根据tagName获取节点，读取属性值以及文本内容

<root>
　　<subNeg Id='1'>
　　　　NegName
　　</subNeg>
</root>

var Negs = xmlDoc.getElementsByTagName("subNeg"); //读取节点
var attra=Negs.attributes['Id'].textContent； //读取属性值
var text=Negs.textContent; //读取节点文本部分

 

以下实现：下面加载xml格式遍历子节点，输出为表格的功能

xml格式如下：

<?xml version="1.0" encoding="utf-8" ?>
<Negative>
 <subNeg cate="一、农、林、牧、渔业">
 <neg ord="（一）" cate="种业">
 未经批准，禁止采集农作物种质资源。
 </neg>
 <neg ord="（二）" cate="农业">
 未经批准，禁止占用农作物种质资源。
 </neg>
 </subNeg>
</Negative>

js读取xml并遍历 Negative 节点的子节点，并输出表格

 

    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 = '<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 ")
            $("#datalist").append(htmlstr.join(''));
        });
    }

 

 加载xml的方法：

 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;
 }