javascript - 如何从 XML 表格单元格获取 url/href

Question

我在从 XML 单元格获取 url/href 时遇到困难。

在下面的示例中，我能够获取 type 和 subtype 的值，但我不知道如何获取 url来自照片。

我的想法是它可以类似于这个“var x = elem.getElementsByTagName(“photo”).url;”但似乎我不能弄清楚。

XML:

<item>
    <type>animal</type>
    <subtype>dog</contentId>
    <photo url="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_1280.jpg"/>
</item>

<item>
    <type>animal</type>
    <subtype>cat</contentId>
    <photo url="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg"/>
</item> 

代码:

<style>
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
}
</style>


<button type="button" onclick="loadDoc()">Load</button>
<br><br>
<table id="myTable"></table>


<script>
var xmlFile = 'file.xml';

function loadDoc() {
  var xhttp = new XMLHttpRequest();

  xhttp.open("GET", xmlFile, true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      xmlFunction(this.response);
    }
  };

}

function xmlFunction(xml) {
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xml, "text/xml");
  var table = "<tr><th>Type</th><th>Subtype</th><th>Photo</th></tr>";
  var x = xmlDoc.getElementsByTagName("item");
  for (var elem of x) {
    var type = elem.getElementsByTagName(
  "type")[0].childNodes[0].nodeValue;
    var subtype = elem.getElementsByTagName("subtype")[0].childNodes[0].nodeValue;
    var photo = elem.getElementsByTagName("photo").url;

    table += "<tr><td>" + type + "</td><td>" + subtype + "</td><td>" + photo + "</td></tr>";
  }
  document.getElementById("myTable").innerHTML = table;
}
</script>

Answer 1

在您的代码中有这一行:

var photo = elem.getElementsByTagName("photo").url;

您需要元素中的属性。由于您使用 0 作为索引，因此您也可以将其用于照片，并且可以将该代码行更新为:

var photo = elem.getElementsByTagName("photo")[0].getAttribute('url');

请注意，在您提供的 xml 中，此行不正确:

<subtype>dog</contentId>

您还缺少根节点，但我认为这是 xml 可能是较大部分的一部分。