尝试使用 js 在 Html 中显示 xml 结果答案

【问题标题】：Trying to display xml results in Html using js尝试使用 js 在 Html 中显示 xml 结果
【发布时间】：2022-02-08 17:25:17
【问题描述】：

我正在尝试显示来自该文件的 xml 信息

<?xml version="1.0" encoding="UTF-8" ?>
<root>
    <key name="The Mintoons #690" type="int">1</key>
    <key name="The Mintoons #368" type="int">2</key>
    <key name="The Mintoons #979" type="int">3</key>
    <key name="The Mintoons #185" type="int">4</key>
    <key name="The Mintoons #499" type="int">5</key>
    <key name="The Mintoons #554" type="int">6</key>
</root>

我的html是这样编码的

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

<button type="button" onclick="loadXMLDoc()">Reveal Results</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "result.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("key");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i] +
    "</td><td>" +
    x[i].getAttribute("name")[0] +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

我想在表格中显示

NFT	Rarity
The Mintoons #690	1
The Mintoons #368	2

像这样，而不是像这样显示

NFT	Rarity
[Object Element]	T
[Object Element]	T

我不知道我在这里做错了什么

【问题讨论】：

x[i] 是一个对象（<key> 标签），你可能想要x[i].getAttribute("name")。 x[i].getAttribute("name")[0] 给出了 name 属性的第一个字母，你可能想要 x[i].textContent 。
附带说明，从外部来源构建 HTML 内容是一个安全漏洞。如果 XML 文件来自完全受信任的来源，则可以，但最好构建元素并将内容添加到其 .textContent
我根据您的第一条评论更改了代码，它起作用了，谢谢，我知道使用外部资源会产生安全问题，但它适用于大学项目，所以它并不那么重要。再次感谢您的帮助。

标签： javascript html xml dom

【解决方案1】：

（在cmets中澄清后形成答案）

由于x 是 DOM 元素的集合（在这种情况下是 XML 节点，但也可以是 HTML 元素），x[i] 是单个元素对象，因此输出它会产生字符串 '[Object Element] '。

x[i].getAttribute("name") 返回元素name 属性的内容，即第一个x[0] 的字符串“The Mintoons #690”。所以这可以用于表格的第一列。

x[i].getAttribute("name")[0] 只是返回所述字符串的第一个字符，即“T”——这里可能不是想要的结果。可以使用x[i].textContent 检索元素的内部内容（开始标记和结束标记之间的内容 - “1”表示第一个元素）。

因此，作为结论，function myFunction() 可以是：

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("key");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getAttribute("name") +
    "</td><td>" +
    x[i].textContent +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

附带说明，从输入或获取的源构建 HTML 序列可能会产生安全漏洞。如果来源是绝对可信的可能没问题，但更安全的等价物会是

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var x = xmlDoc.getElementsByTagName("key");

  var table = document.createElement("table");
  var tr, th, td;

  tr = document.createElement("tr");
  th = document.createElement("th");
  th.textContent = "Artist";
  tr.appendChild(th);
  th = document.createElement("th");
  th.textContent = "Title";
  tr.appendChild(th);
  table.appendChild(tr);

  for (i = 0; i < x.length; i++) { 
    tr = document.createElement("tr");
    td = document.createElement("td");
    td.textContent = x[i].getAttribute("name");
    tr.appendChild(td);
    td = document.createElement("td");
    td.textContent = x[i].textContent;
    tr.appendChild(td);
    table.appendChild(tr);
  }
  document.getElementById("demo").appendChild(table);
}

【讨论】：