javascript - js 解析XML文档元素问题
问题描述
我在使用javascript 解析XML文档时候碰到了一些问题,想请问各位应该如何解决。
以下是我的JS函数代码,
function XMLResult(xhr) { //xhr是我已经获取到的XMLHttpRequest 对象
var x, i, xmlDoc, txt;
xmlDoc = xhr.responseXML; //获取XML文档对象
txt = "";
x = xmlDoc.getElementsByTagName('info'); // 返回element为info的List
for (i = 0; i < x.length; i++) {
txt += "第" + (i + 1) + "位用户发言 : ";
txt += x[i].childNodes[0].nodeValue + "<br />"; //这里解析有错误
}
document.getElementById("historyInfo").innerHTML = txt;
}
下面是需要解析的XML文档
<?xml version="1.0" encoding="utf-8"?>
<message>
<info id="1">
<username>duxingzhe</username>
<content>hello world --by diankuangzhe</content>
</info>
<info id="2">
<username>duxingzhe</username>
<content>试试编码怎么样?</content>
</info>
<info id="3">
<username>wky</username>
<content>happybirthday</content>
</info>
<info id="4">
<username>duxingzhe</username>
<content>42141</content>
</info>
<info id="5">
<username>duxingzhe</username>
<content>haha</content>
</info>
<info id="6">
<username>duxingzhe</username>
<content>不知道呀</content>
</info>
<info id="7">
<username>duxingzhe</username>
<content>你好呀</content>
</info>
<info id="8">
<username>duxingzhe</username>
<content>你好呀</content>
</info>
</message>
具体的出错情况是获取到的txt += x[i].childNodes[0].nodeValue + "<br />";
这行代码得到的内容为null ,但是事实上在xml文档中是有对应内容存在的。我网上查找了,有方案说把语句更改为:txt += x[i].firstChild.nodeValue + "<br />";
,但是并不适用于我的情况,仍然返回 null 。现在我不清楚该如何解决这个问题。希望能得到你们的帮助,感激不尽...
firstChild 应该也不行的吧 nodeValue属性只能取文本节点的值,可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeValue
你这里实际可以直接取 第一个子节点的内容的,能否使用x[i].childNodes[0].innerHTML
或者 x[i].childNodes[0].innerText
呢?
补充,上面说法有误,因为没有考虑空文本节点。
// xml 字符串
var xmlstr = `<?xml version="1.0" encoding="utf-8"?>
<message>
<info id="1">
<username>duxingzhe</username>
<content>hello world --by diankuangzhe</content>
</info>
<info id="2">
<username>duxingzhe</username>
<content>试试编码怎么样?</content>
</info>
<info id="3">
<username>wky</username>
<content>happybirthday</content>
</info>
<info id="4">
<username>duxingzhe</username>
<content>42141</content>
</info>
<info id="5">
<username>duxingzhe</username>
<content>haha</content>
</info>
<info id="6">
<username>duxingzhe</username>
<content>不知道呀</content>
</info>
<info id="7">
<username>duxingzhe</username>
<content>你好呀</content>
</info>
<info id="8">
<username>duxingzhe</username>
<content>你好呀</content>
</info>
</message>`
// 解析为XML
var xml = $.parseXML(xmlstr)
上面模拟好了 XML文档 下面进行测试
var x=xml.getElementsByTagName('info');
x; // [info#1, info#2, info#3, info#4, info#5, info#6, info#7, info#8]
x[0].childNodes[0]; // #text
看到了吧 上面的x[0].childNodes[0] 是#text 实际是取到了info和username的之间的空白文本(换行)
有图为证:
既然知道了问题,那么就有方案了:
1、XML文本改成不换行的 没空格的 (这个当我没说,实际很难控制)
2、直接找到username标签,再获取值,如下所示:
var uname = x[0].getElementsByTagName('username')[0];
uname.firstChild.data;// duxingzhe
想想直接处理XML还是比较烦的。
可以使用xmltojson 将xml转为json,然后再处理。
或者使用jQuery 来取吧。
$(xml).find('info').each(function(index,item){
var $item = $(item);
console.log($item.find('username').text() , $item.find('content').text())
});
// duxingzhe hello world --by diankuangzhe
// duxingzhe 试试编码怎么样?
// wky happybirthday
// duxingzhe 42141
// duxingzhe haha
// duxingzhe 不知道呀
// duxingzhe 你好呀
// duxingzhe 你好呀
这篇关于javascript - js 解析XML文档元素问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!