js 解析XML文档元素问题

Question

我在使用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 。现在我不清楚该如何解决这个问题。希望能得到你们的帮助，感激不尽...

Answer 1

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 你好呀