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

 

以下例子为 加载xml 并读取属性及内容 

 

 1 function  inidata()
 2 
 3 {
 4 
 5 var xmlDoc;
 6 //加载xml
 7 xmlDoc = loadXMLDoc("negativeData.xml");
 8 
 9 var htmlstr = new Array();
10 //解析
11 var Negs = xmlDoc.getElementsByTagName("subNeg");
12 console.log("Negs" + Negs.length);
13 $(Negs).each(function (i, v) {
14 htmlstr = new Array();
15 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>';
16 htmlstr.push(thead);
17 var category = v.attributes["cate"].textContent;
18 console.log(category);
19 console.log("category" + category);
20 htmlstr.push('<tr><td colspan="3" style="font-size:20px;">' + category + '</td></tr>');
21 var subs = v.getElementsByTagName("neg");
22 $(subs).each(function (si, sv) {
23 var orinfo = sv.attributes["ord"].textContent;
24 var cate = sv.attributes["cate"].textContent;
25 var text =sv.textContent;
26 htmlstr.push('<tr><td scope="row">' + orinfo + '</td><td scope="row">' + cate + '</td><td scope="row" style="padding:10px;">' + text + '</td></tr>');
27 
28 });
29 htmlstr.push("</table></div></li>")
30 $("#datalist").append(htmlstr.join(''));
31 
32 });
33 
34 }
35 
36 function loadXMLDoc(dname) {
37     if (window.XMLHttpRequest) {
38         xhttp = new XMLHttpRequest();
39     } else {
40         xhttp = new ActiveXObject("Microsoft.XMLHTTP");
41     }
42     xhttp.open("GET", dname, false);
43     xhttp.send("");
44     return xhttp.responseXML;
45 }

 

附上xml结构

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <Negative>
 3 <subNeg cate="一、农、林、牧、渔业">
 4 <neg ord="（一）" cate="种业">
 5 
 6 未经批准，禁止采集农作物种质资源。
 7 
 8 </neg>
 9 </subNeg>
10 </Negative>

 

总结为：

获取xml某个父节点标志获取其子节点 xmlparentnode.getElementsByTagName("neg")

遍历子节点 获取子节点属性及内容 xmlobj.attributes['name'] 获取xml 节点属性对象 xmlobj.textContent

 

在做此功能时发现 xml读取必须依赖IIS等网站发布环境 直接打开文件则浏览器识别xml的属性方法报错 不知何故？希望看到的大神能够告诉我 非常感谢

 

完整demo 需要的 消息我 给我邮箱地址我发邮箱

转载于:https://www.cnblogs.com/cheery-go/p/6667336.html