使用 javascript 遍历 XML 节点答案

【问题标题】：Traversing an XML Nodes using javascript使用 javascript 遍历 XML 节点
【发布时间】：2013-03-28 14:00:53
【问题描述】：

我从 AJAX 调用中获得以下 XML：

<cars>
<car id="Spyder">
<year>1946</year>
<power>150bhp</power>
<description>A classic car with smooth lines, rounded lights and recessed exhaust.</description>
<image>1.jpg</image>
</car>
<car id="Solaris">
<year>1935</year>
<power>145bhp</power>
<description>A revisionist design, encompassing aggressive engine lines balanced with smooth curves.</description>
<image>2.jpg</image>
</car>
<car id="Career">
<year>1932</year>
<power>250bhp</power>
<description>A triumph of engineering with independent suspension and brakes.</description>
<image>3.jpg</image>
</car>
</cars>

我正在尝试获取有关汽车的所有信息。我尝试访问firstChild.text 等。这是我尝试过的最新代码，但我仍然收到一个异常说Object #<Element> has no method 'getFirstChild'，所以大概getFirstChild 函数有问题。

有人可以指导我如何继续，遍历和获取数据吗？

这是我的代码：

for (var i = 0; i < data.getElementsByTagName("car").length; i++) {
    carname = data.getElementsByTagName("car")[i].getAttribute("id");
    year = data.getElementsByTagName("car")[i].getFirstChild().getTextContent();
    power = data.getElementsByTagName("car")[i].getSecondChild().getTextContent();
    description = data.getElementsByTagName("car")[i].getThirdChild().getTextContent();
    image = data.getElementsByTagName("car")[i].getFourthChild().getTextContent();
    alert(carname + year + power + description + image);
}

【问题讨论】：

标签： javascript jquery html xml xml-parsing

【解决方案1】：

试试

var cars = document.getElementsByTagName("car");
for (var i = 0; i < cars.length; i++) {
    var car = cars[i];
    carname = car.getAttribute("id");
    year = getText(car, 'year');
    power = getText(car, 'power');
    description = getText(car, 'description');
    image = getText(car, 'image');
    console.log(carname + year + power + description + image);
}

function getText(car, tag){
    var els = car.getElementsByTagName(tag);
    return els.length ? els[0].innerHTML : '';
}

【讨论】：

【解决方案2】：

LIVE DEMO

var myXML = '<cars> \
<car id="Spyder"> \
  <year>1946</year> \
  <power>150bhp</power> \
  <description>A classic car with smooth lines, rounded lights and recessed exhaust.</description>\
  <image>1.jpg</image>\
</car>\
<car id="Solaris">\
  <year>1935</year>\
  <power>145bhp</power>\
  <description>A revisionist design, encompassing agressive engine lines balanced with smooth curves.</description>\
  <image>2.jpg</image>\
</car>\
<car id="Career">\
  <year>1932</year>\
  <power>250bhp</power>\
  <description>A triumph of engineering with independant suspension and brakes.</description>\
  <image>3.jpg</image>\
</car>\
</cars>';


var xmlDoc = $.parseXML( myXML ),
    xml = $(xmlDoc),
    cars = xml.find( "cars" );

$.each(cars.find('car'), function(i, el){
  var car  = $(el),
      id  =  car.attr('id'),
      year =  car.find('year').text(),
      power =  car.find('power').text(),
      description =  car.find('description').text(),
      image =  car.find('image').text() ;
   alert( id+' '+year+' '+power+' '+description+' '+image );
});

【讨论】：

【解决方案3】：

在 JavaScript 中你没有 getFirstChild，这看起来像 Java DOM API。您有一个名为 firstChild 的属性。

我会尝试类似：

var slice = Function.call.bind(Array.prototype.slice);

var cars = slice(data.getElementsByTagName("car")).reduce(function(cars, node) {
    cars.push(["year", "power", "description", "image"].reduce(function(car, tag) {
      car[tag] = node.getElementsByTagName(tag)[0].textContent;

      return car;
    }, {id: node.getAttribute("id") }));

    return cars;
}, []);

console.log(cars);

【讨论】：

【解决方案4】：

由于某种原因，上述所有事情都不起作用。下面的代码虽然有效..

x=xmlDoc.documentElement;
  y=xmlDoc.documentElement.childNodes;
  var temp1,temp2;
for (i=0;i<y.length;i++)
  {
  if (y[i].nodeType!=3)
    {carname=y[i].getAttribute("id");

    for (z=0;z<y[i].childNodes.length;z++)
      {
        //alert(y[i].childNodes[z].nodeName);
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="year")
        {
          year =y[i].childNodes[z].childNodes[0].nodeValue;
        }
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="power")
        {
          power =y[i].childNodes[z].childNodes[0].nodeValue;
        }
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="description")
        {
          description =y[i].childNodes[z].childNodes[0].nodeValue;
        }
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="image")
        {
          image =y[i].childNodes[z].childNodes[0].nodeValue;
          alert(image);
          image="data\\images\\"+image; 
        }

      }

希望这对某人有所帮助..:-)

【讨论】：