我需要返回其book属性为“ web”的作者的姓名。谢谢
这是网站：https://www.w3schools.com/xml/tryit.asp?filename=try_dom_getattribute这是XML：https://www.w3schools.com/xml/books.xml
您可以使用.querySelectorAll()来完成
const web_books = document.querySelectorAll("book[category='web']");
//console.log(web_books);
const web_book_authors = {};
web_books.forEach(book => {
const title = book.querySelector('title').innerText;
const authors = book.querySelectorAll('author');
const authors_arr = [];
authors.forEach(author => {
authors_arr.push(author.innerText);
})
web_book_authors[title] = authors_arr;
})
console.log(web_book_authors);.as-console-wrapper { max-height: 100% !important; top: 0; }<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>输出为：
{
"XQuery Kick Start": [
"James McGovern",
"Per Bothner",
"Kurt Cagle",
"James Linn",
"Vaidyanathan Nagarajan"
],
"Learning XML": [
"Erik T. Ray"
]
}
对于您在共享（https://www.w3schools.com/xml/tryit.asp?filename=try_dom_getattribute）链接中的特定示例，请尝试以下操作：
我的演示保存在这里：https://www.w3schools.com/code/tryit.asp?filename=GD3DQY2F5879
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, xmlDoc, txt;
xmlDoc = xml.responseXML;
txt = "";
//x = xmlDoc.getElementsByTagName('book');
//for (i = 0; i < x.length; i++) {
//txt += x[i].getAttribute('category') + "<br>";
//}
text = "";
const web_books = xmlDoc.querySelectorAll("book[category='web']");
console.log(web_books);
const web_book_authors = {};
web_books.forEach(book => {
console.log('book', book)
const title = book.querySelector('title').innerHTML;
text += "<h3 style='margin-bottom: 0px;'>" + title + "</h3>" + "<br/>";
const authors = book.querySelectorAll('author');
const authors_arr = [];
authors.forEach(author => {
console.log('author', author)
authors_arr.push(author.innerHTML);
text += author.innerHTML + "<br/>";
})
web_book_authors[title] = authors_arr;
})
console.log(web_book_authors);
console.log(text);
document.getElementById("demo").innerHTML = text;
}</script>
</body>
</html>
正如您在下面看到的那样，它在堆栈溢出时将不起作用，因为：
在'https://www.w3schools.com/xml/books.xml处访问XMLHttpRequest来自原点“ null”的数据已被CORS政策阻止：否请求中存在“ Access-Control-Allow-Origin”标头资源。
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "https://www.w3schools.com/xml/books.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, xmlDoc, txt;
xmlDoc = xml.responseXML;
txt = "";
//x = xmlDoc.getElementsByTagName('book');
//for (i = 0; i < x.length; i++) {
//txt += x[i].getAttribute('category') + "<br>";
//}
text = "";
const web_books = xmlDoc.querySelectorAll("book[category='web']");
console.log(web_books);
const web_book_authors = {};
web_books.forEach(book => {
console.log('book', book)
const title = book.querySelector('title').innerHTML;
text += "<h3 style='margin-bottom: 0px;'>" + title + "</h3>" + "<br/>";
const authors = book.querySelectorAll('author');
const authors_arr = [];
authors.forEach(author => {
console.log('author', author)
authors_arr.push(author.innerHTML);
text += author.innerHTML + "<br/>";
})
web_book_authors[title] = authors_arr;
})
console.log(web_book_authors);
console.log(text);
document.getElementById("demo").innerHTML = text;
}<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
</body>
</html>