DOM - javaScript getAttribute [关闭]答案

【问题标题】：DOM - javaScript getAttribute [closed]DOM - javaScript getAttribute [关闭]
【发布时间】：2020-03-21 23:04:45
【问题描述】：

我需要返回书籍属性为“web”的作者姓名。谢谢

这是网站：https://www.w3schools.com/xml/tryit.asp?filename=try_dom_getattribute 这是 XML：https://www.w3schools.com/xml/books.xml

【问题讨论】：

标签： javascript xml dom

【解决方案1】：

你可以用.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) 中的具体示例，请尝试以下操作：

我的 Demo 保存在这里：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 CORS 策略已阻止来自原点“null”：否 '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>

【讨论】：