javascript - XML 解析带有属性的 header ？

Question

我正在使用 Javascript 中的 XML 代码来尝试创建热图，XML 如下所示:

<trk>
 <name>Oscar</name>
 <trkseg>
 <trkpt lat="20.922436" lon="-32.950274">
      <ele>35.23</ele>
      <time>2013-04-28T09:23:11Z</time>
  </trkpt>
  <trkpt lat="21.231232" lon="-30.9123123">
      <ele>35.23</ele>
      <time>2013-04-28T09:23:11Z</time>
  </trkpt>
  </trkseg>
</trk>

但我似乎无法定位“trkpt”，因为它包含 lat= 和 lon= 值，这总是不同的。我如何定位该 header ？我尝试过使用:

getElementsByTagName("trkpt")

但它找不到信息 - 我在这里缺少什么？

感谢您的帮助。

更新

解释我到目前为止所尝试的代码片段:

var xmlParsing = new XMLHttpRequest();
var xmlDoc = "Hello";
var readyString = "asd";

xmlParsing.open("GET","3.xml", false);
xmlParsing.send();

xmlDoc = xmlParsing.responseXML;


var x=xmlDoc.getElementsByTagName("trk");
var y = xmlDoc.getElementsByTagName("trkseg");  

for (i=0;i<x.length;i++){ 



  document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);

  document.write(": <em>");

  for ( e=0; e < y.length; e++) {
  document.write(y[e].getElementsByTagName("trkpt")[0].childNodes[0].nodeValue);
  }

  document.write("</em> <br>");
  }

这主要是为了尝试打印这些值来看看我在做什么。

结果返回:

Oscar nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull

Answer 1

问题在于:

y[e].getElementsByTagName("trkpt")[0].childNodes[0].nodeValue

此元素的 childNodes 不是您所期望的。如果您这样做:

console.log(y[e].getElementsByTagName("trkpt")[0].childNodes);

然后您将看到以下内容:

[text, ele, text, time, text]

您需要过滤掉文本节点。您可以尝试使用:

y[e].getElementsByTagName("trkpt")[0].firstElementChild.textContent

但是如果您想要其他节点，那么您应该循环并过滤掉文本节点:

var children = y[e].getElementsByTagName("trkpt")[0].childNodes;
for(var c=0; c < children.length; c++){
    if(children[c].nodeType == Node.ELEMENT_NODE){
        // Do whatever
        console.log(children[c].textContent);
    }
}