我在使用JS从外部XML文档获取数据时遇到了一个问题。到目前为止，我一直在学习w3schools的AJAX XML教程，但遇到了一些无法解决的问题。我有一个XML，看起来像这样：
XML
<root>
<document-id>
<author>Tom Riddle</autor>
<title>abzy</title>
<year>1995</year>
</document-id>
<document-id>
<author>Tom Riddle</autor>
<author>Albums Dumbledore</autor>
<title>abzy</title>
</document-id>
<document-id>
<author>Tom Riddle</autor>
<year>1995</year>
</document-id>
</root>
我想访问上面XML中的数据，并生成一个包含所有值的表。我遇到的问题是，例如，如果我有多个作者，我的请求只会为每个TR元素获取一个作者的，如果有两个，它只会将其向下移动到下一个。有没有一种方法可以让我的代码从一个文档id中获取所有作者，并将他们放在同一个td中？
我认为使用for循环来创建不同的td元素会有帮助吗？看起来怎么样
HTML和JS代码
<body>
<header>
<h1>Reading Data from XML Files</h1>
</header>
<main>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<table id="demo">
</table>
</main>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
myFunction(this);
}
xhttp.open("GET", "books.xml");
xhttp.send();
}
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const x = xmlDoc.getElementsByTagName("document-id");
console.log(x)
let table="<tr><th>Author</th><th>Title</th><th>Year</th></tr>";
for (let i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue == undefined)?"": x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue ) +
"</td><td>" +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue == undefined)?"": x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue ) +
"</td><td>" +
x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue == undefined)?"": x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue ) +
"</tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
您可以对XML文档(responseXML(使用查询选择器。如果它们不复杂或不使用名称空间，那么效果非常好，此时您可能需要研究Xpath。
节点内容的标准属性是textContent。
// for the example, create the DOM document from a string
const xmlDocument = (new DOMParser()).parseFromString(getXMLString(), 'text/xml');
const tbody = document.querySelector('#demo tbody');
// get the document-id elements and put them into an array
const books = Array.from(xmlDocument.querySelectorAll('document-id'));
books.forEach(
(book) => {
// a table row for each element
const tr = tbody.appendChild(document.createElement('tr'));
tr
.appendChild(document.createElement('td'))
.textContent = book.querySelector('title')?.textContent || '';
tr
.appendChild(document.createElement('td'))
.textContent = book.querySelector('year')?.textContent || '';
// multiple authors, map nodes to strings and join them
tr
.appendChild(document.createElement('td'))
.textContent = Array.from(book.querySelectorAll('author'))
.map((author) => author.textContent)
.join(', ');
}
);
function getXMLString() {
return `<?xml version="1.0" standalone="yes"?>
<root>
<document-id>
<author>Tom Riddle</author>
<title>One</title>
<year>1995</year>
</document-id>
<document-id>
<author>Tom Riddle</author>
<author>Albums Dumbledore</author>
<title>Two</title>
</document-id>
<document-id>
<author>Tom Riddle</author>
<year>1995</year>
</document-id>
</root>`
}td {
border: 1px solid black;
}<table id="demo">
<tbody>
</tbody>
</table>