js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2023-06-13 09:14:45 时间
分别针对ie和火狐分别作了对xml文档和xml字符串的解析,所有代码都注释掉了,想看哪部分功能,去掉注释就可以了。
至于在ajax环境下解析xml,其实原理是一样的,只不过放在了ajax里,还是要对返回的xml进行解析。
复制代码代码如下:
至于在ajax环境下解析xml,其实原理是一样的,只不过放在了ajax里,还是要对返回的xml进行解析。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>NewDocument</title>
<metaname="Author"content="lushuaiyin">
</head>
<body>
用js解析xml文档和xml字符串
</body>
</html>
<script>
//解析xml文档/////////////////////////////////////////////////////
varxmlDoc=null;
//支持IE浏览器
if(window.ActiveXObject){
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
}
//支持Mozilla浏览器
elseif(document.implementation&&document.implementation.createDocument){
xmlDoc=document.implementation.createDocument("","",null);
}
else{
alert("here");
}
if(xmlDoc!=null){
xmlDoc.async=false;
xmlDoc.load("house.xml");
}
//ie和火狐不仅解析器不一样,解析过程也不一样。如下;
//ie解析xml文档
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居
//层层遍历解析childNodes[1]
//alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//弹出200万
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居
//还可以用item(i)进行遍历
//varnodes=xmlDoc.documentElement.childNodes;
//alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text);//弹出150万
//alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text);//弹出一室三居
//火狐解析xml文档
//火狐浏览器和ie解析xml不一样节点的值用textContent。
//并且他会在有的层次child节点前后都加上"\n"换行符。(这个搞不清楚为什么,用firebug调试的时候就是这个样子,所以写过的代码最好测试一下,换个环境就不对了)
//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。
//第3个节点是"\n",第4个节点才是真正的第二个节点。
//层层获取解析childNodes[0]
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//弹出150万
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//弹出一室三居
//直接获取节点名解析getElementsByTagName("address")
//alert(xmlDoc.getElementsByTagName("address")[0].textContent);//弹出150万一室三居200万300万
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//弹出150万一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//弹出150万
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//弹出一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//弹出200万
//火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。
//第一个节点是item(1),第二个节点是item(3),第三个节点是item(5)
//item(1)函数遍历解析
//varnodes=xmlDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent);//弹出150万一室三居
//alert(nodes.item(1).childNodes.item(1).textContent);//弹出150万
//alert(nodes.item(1).childNodes.item(3).textContent);//一室三居
//解析xml字符串/////////////////////////////////////////////////////////////////////////
varstr="<car>"+
"<brand><price>50万</price><pattern>A6</pattern></brand>"+
"<brand><price>65万</price><pattern>A8</pattern></brand>"+
"<brand><price>17万</price></brand>"+
"</car>";
//跨浏览器,ie和火狐解析xml使用的解析器是不一样的。
varxmlStrDoc=null;
if(window.DOMParser){//MozillaExplorer
parser=newDOMParser();
xmlStrDoc=parser.parseFromString(str,"text/xml");
}else{//InternetExplorer
xmlStrDoc=newActiveXObject("Microsoft.XMLDOM");
xmlStrDoc.async="false";
xmlStrDoc.loadXML(str);
}
//ie解析xml字符串
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出50万
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出A6
//还可以用item(i)进行遍历
//varstrNodes=xmlStrDoc.documentElement.childNodes;
//alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text);//弹出50万
//alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text);//弹出A6
//火狐解析xml字符串
//火狐浏览器和ie解析xml不一样节点的值用textContent。
//并且他会在有的层次child节点前后都加上"\n"换行符。
//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。
//第3个节点是"\n",第4个节点才是真正的第二个节点。
//alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//弹出65万A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//弹出65万
//火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。
//第一个节点是item(1),第二个节点是item(3),第三个节点是item(5)
//varnodes=xmlStrDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent);//弹出65万A8
//alert(nodes.item(1).childNodes.item(0).textContent);//弹出65万
//alert(nodes.item(1).childNodes.item(1).textContent);//弹出A8
</script>
其中xml每个节点所在层次是最烦人的问题,只能一次次去试,只要出来一个正确的,
就很好确定节点的层次关系了,或者debug一下。
感觉这方面json还是更好阅读和理解。这个解析太费劲了
<?xmlversion="1.0"encoding="utf-8"?>
<address>
<cityname="北京">
<price>150万</price>
<type>一室三居</type>
</city>
<cityname="上海">
<price>200万</price>
</city>
<cityname="杭州">
<price>230万</price>
</city>
<cityname="南京"></city>
</address>
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- js书写原生ajax,JS 原生ajax写法
- Module build failed (from ./node_modules/babel-loader/lib/index.js)
- Moment.js 如何对时间进行比较获得不同的天数
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- JS跳转代码_js中跳转页面路径
- JS 事件循环 Node 篇
- 【JS 逆向百例】猿人学系列 web 比赛第五题:js 混淆 - 乱码增强,详细剖析
- JS document(文档节点)详解
- JS生成指定范围的随机数和字符串
- Linux上的JS压缩工具(js压缩工具linux)
- JS技术连接Oracle数据库实现数据交互(js连接oracle实例)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- 从前端JS里请求Redis资源,搭建高性能应用(前端js请求redis)
- Oracle中使用JS变量管理数据(oracle使用js变量)
- JS定时关闭窗口的实例
- 使用js判断当前时区TimeZone是否是夏令时