遍歷使用JavaScript

Question

的XML節點我從一個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); 
} 

Answer 1

由於某些原因上述所有的事情沒有工作。下面的代碼工作，但..

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; 
     } 

     } 

希望這可以幫助別人.. :-)

Answer 2

嘗試

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 : ''; 
} 

Answer 3

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); 
}); 

Answer 4

在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);