Как получить url / href из ячейки таблицы XML

Question

У меня проблемы с получением URL / href из ячейки XML.

В приведенном ниже примере я могу получить значения 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 может быть частью большей части.