javascript - js 解析XML文档元素问题
黄舟
黄舟 2017-04-11 13:19:05
[JavaScript讨论组]

我在使用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 + "
"; //这里解析有错误 } document.getElementById("historyInfo").innerHTML = txt; }

下面是需要解析的XML文档



 
   
    duxingzhe  
    hello world --by diankuangzhe 
    
   
    duxingzhe  
    试试编码怎么样? 
    
   
    wky  
    happybirthday 
    
   
    duxingzhe  
    42141 
    
   
    duxingzhe  
    haha 
    
   
    duxingzhe  
    不知道呀 
    
   
    duxingzhe  
    你好呀 
    
   
    duxingzhe  
    你好呀 
    

具体的出错情况是获取到的txt += x[i].childNodes[0].nodeValue + "
";
这行代码得到的内容为null ,但是事实上在xml文档中是有对应内容存在的。我网上查找了,有方案说把语句更改为:txt += x[i].firstChild.nodeValue + "
";
,但是并不适用于我的情况,仍然返回 null 。现在我不清楚该如何解决这个问题。希望能得到你们的帮助,感激不尽...

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(2)
高洛峰

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

用 jQuery 解析,然后用选择器查找

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号