js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)_javascript技巧

分别针对ie和火狐分别作了对xml文档和xml字符串的解析，所有代码都注释掉了，想看哪部分功能，去掉注释就可以了。

至于在ajax环境下解析xml，其实原理是一样的，只不过放在了ajax里，还是要对返回的xml进行解析。

复制代码 代码如下:

用js解析xml文档和xml字符串


<script> <BR>//解析xml文档///////////////////////////////////////////////////// <BR>var xmlDoc=null; <BR>//支持IE浏览器 <BR>if(window.ActiveXObject){ <BR>xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); <BR>} <BR>//支持Mozilla浏览器 <BR>else if(document.implementation && document.implementation.createDocument){ <BR>xmlDoc = document.implementation.createDocument('','',null); <BR>} <BR>else{ <BR>alert("here"); <BR>} <BR>if(xmlDoc!=null){ <BR>xmlDoc.async = false; <BR>xmlDoc.load("house.xml"); <BR>} <BR>//ie和火狐不仅解析器不一样，解析过程也不一样。如下; <BR>//ie解析xml文档 <BR>//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万 <BR>//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居 <BR>//层层遍历解析childNodes[1] <BR>//alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//弹出200万 <BR>//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万 <BR>//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居 <BR>//还可以用item(i)进行遍历 <BR>//var nodes=xmlDoc.documentElement.childNodes; <BR>//alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出150万 <BR>//alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出一室三居 <BR>//火狐解析xml文档 <BR>//火狐浏览器和ie解析xml不一样节点的值用textContent。 <BR>//并且他会在有的层次child节点前后都加上"\n"换行符。（这个搞不清楚为什么，用firebug调试的时候就是这个样子，所以写过的代码最好测试一下，换个环境就不对了） <BR>//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。 <BR>//第3个节点是"\n",第4个节点才是真正的第二个节点。 <BR>//层层获取解析childNodes[0] <BR>//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//弹出150万 <BR>//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//弹出一室三居 <BR>//直接获取节点名解析getElementsByTagName("address") <BR>//alert(xmlDoc.getElementsByTagName("address")[0].textContent);//弹出150万 一室三居 200万 300万 <BR>//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//弹出150万 一室三居 <BR>//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//弹出150万 <BR>//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//弹出一室三居 <BR>//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//弹出200万 <BR>//火狐也可以用item(1)函数遍历，注意也是有的层次节点前后都加了节点"\n"。 <BR>//第一个节点是item(1)，第二个节点是item(3)，第三个节点是item(5) <BR>//item(1)函数遍历解析 <BR>//var nodes=xmlDoc.documentElement.childNodes; <BR>//alert(nodes.item(1).textContent); //弹出150万 一室三居 <BR>//alert(nodes.item(1).childNodes.item(1).textContent); //弹出150万 <BR>//alert(nodes.item(1).childNodes.item(3).textContent); //一室三居 <BR>//解析xml字符串///////////////////////////////////////////////////////////////////////// <BR>var str="<car>"+ <BR>"<brand><price>50万<pattern>A6"+ <BR>"<brand><price>65万<pattern>A8"+ <BR>"<brand><price>17万"+ <BR>""; <BR>//跨浏览器，ie和火狐解析xml使用的解析器是不一样的。 <BR>var xmlStrDoc=null; <BR>if (window.DOMParser){// Mozilla Explorer <BR>parser=new DOMParser(); <BR>xmlStrDoc=parser.parseFromString(str,"text/xml"); <BR>}else{// Internet Explorer <BR>xmlStrDoc=new ActiveXObject("Microsoft.XMLDOM"); <BR>xmlStrDoc.async="false"; <BR>xmlStrDoc.loadXML(str); <BR>} <BR>//ie解析xml字符串 <BR>//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出50万 <BR>//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出A6 <BR>//还可以用item(i)进行遍历 <BR>//var strNodes=xmlStrDoc.documentElement.childNodes; <BR>//alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出50万 <BR>//alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出A6 <BR>//火狐解析xml字符串 <BR>//火狐浏览器和ie解析xml不一样节点的值用textContent。 <BR>//并且他会在有的层次child节点前后都加上"\n"换行符。 <BR>//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。 <BR>//第3个节点是"\n",第4个节点才是真正的第二个节点。 <BR>//alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//弹出65万 A8 <BR>//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8 <BR>//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//弹出65万 <BR>//火狐也可以用item(1)函数遍历，注意也是有的层次节点前后都加了节点"\n"。 <BR>//第一个节点是item(1)，第二个节点是item(3)，第三个节点是item(5) <BR>//var nodes=xmlStrDoc.documentElement.childNodes; <BR>//alert(nodes.item(1).textContent); //弹出65万 A8 <BR>//alert(nodes.item(1).childNodes.item(0).textContent); //弹出65万 <BR>//alert(nodes.item(1).childNodes.item(1).textContent); //弹出A8 <BR></script>

其中xml每个节点所在层次是最烦人的问题，只能一次次去试，只要出来一个正确的，
就很好确定节点的层次关系了，或者debug一下。

感觉这方面json还是更好阅读和理解。这个解析太费劲了

复制代码 代码如下:

150万
一室三居


200万


230万