如何用Java Script从XML中获取属性值？

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="1">
        <title>JavaScript高级程序设计</title>
        <author>Nicholas C. Zakas</author>
    </book>
    <book id="2">
        <title>深入理解ES6</title>
        <author>Nicholas C. Zakas</author>
    </book>
</books>

// 假设你的XML数据存储在一个名为xmlString的变量中
var xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="1">
        <title>JavaScript高级程序设计</title>
        <author>Nicholas C. Zakas</author>
    </book>
    <book id="2">
        <title>深入理解ES6</title>
        <author>Nicholas C. Zakas</author>
    </book>
</books>`;

// 创建一个DOM解析器
var parser = new DOMParser();

// 使用DOM解析器解析XML字符串
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// 获取所有的book元素
var books = xmlDoc.getElementsByTagName("book");

// 遍历所有的book元素并获取它们的id属性值
for (var i = 0; i < books.length; i++) {
    var bookId = books[i].getAttribute("id");
    console.log("Book ID: " + bookId);
}

// 假设你的XML文件名为books.xml，并且与HTML文件在同一目录下
fetch('books.xml')
    .then(response => response.text())
    .then(xmlString => {
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(xmlString, "text/xml");
        var books = xmlDoc.getElementsByTagName("book");
        for (var i = 0; i < books.length; i++) {
            var bookId = books[i].getAttribute("id");
            console.log("Book ID: " + bookId);
        }
    })
    .catch(error => console.error('Error:', error));