通过属性值获取元素答案

【问题标题】：get elements by attribute value通过属性值获取元素
【发布时间】：2016-02-25 13:53:05
【问题描述】：

我正在通过Javascript 中的webservices 发送请求，我收到的响应是这样的：

<ListOfBook>
<Book>
    <Id>ACIA-11QWTKX</Id>
    <ListOfBookUser recordcount="0" lastpage="true">
    </ListOfBookUser>
</Book>
<Book>
    <Id>ACIA-ANC0CC</Id>
    <ListOfBookUser recordcount="1" lastpage="true">
        <BookUser>
            <BookId>ACIA-ANC0CC</BookId>
            <BookName>TKSP_GLOBAL</BookName>
        </BookUser>
        </ListOfBookUser>
</Book>                             
<Book>
    <Id>ACIA-ANC0CF</Id>
    <ListOfBookUser recordcount="0" lastpage="true">
    </ListOfBookUser>
</Book>
<Book>
    <Id>ACIA-EUMCH5</Id>
    <ListOfBookUser recordcount="1" lastpage="true">
        <BookUser>
            <BookId>ACIA-EUMCH5</BookId>
            <BookName>TKSP_MADRID_CENTRO_SUR</BookName>
        </BookUser>
    </ListOfBookUser>
</Book>

如您所见，<Book> 的某些元素有一个子 <BookUser>，而其他元素没有这个子元素。

我需要一种方法来提取具有<BookUser> 子级的<Book> 元素与regular expressions、DOM 或Xpath。请问有什么建议吗？

【问题讨论】：

Xpath for xml 肯定
有一些Book 元素带有BookUser 孙子，我没有看到任何有这个名字的子元素。 XPath 将 //Book[ListOfBookUser/BookUser].
但是如何在 Javascript 中使用 Xpath 呢？

标签： javascript regex dom xpath

【解决方案1】：

您可以将 XPath 与 //Book[ListOfBookUser/BookUser] 之类的表达式一起使用：

var xmlMarkup = `<ListOfBook>
<Book>
    <Id>ACIA-11QWTKX</Id>
    <ListOfBookUser recordcount="0" lastpage="true">
    </ListOfBookUser>
</Book>
<Book>
    <Id>ACIA-ANC0CC</Id>
    <ListOfBookUser recordcount="1" lastpage="true">
        <BookUser>
            <BookId>ACIA-ANC0CC</BookId>
            <BookName>TKSP_GLOBAL</BookName>
        </BookUser>
        </ListOfBookUser>
</Book>                             
<Book>
    <Id>ACIA-ANC0CF</Id>
    <ListOfBookUser recordcount="0" lastpage="true">
    </ListOfBookUser>
</Book>
<Book>
    <Id>ACIA-EUMCH5</Id>
    <ListOfBookUser recordcount="1" lastpage="true">
        <BookUser>
            <BookId>ACIA-EUMCH5</BookId>
            <BookName>TKSP_MADRID_CENTRO_SUR</BookName>
        </BookUser>
    </ListOfBookUser>
</Book>
</ListOfBook>`;

var xmlDoc = new DOMParser().parseFromString(xmlMarkup, 'application/xml');
var bookSnapshot = xmlDoc.evaluate('//Book[ListOfBookUser/BookUser]', xmlDoc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0, l = bookSnapshot.snapshotLength; i < l; i++) {
  var book = bookSnapshot.snapshotItem(i);
  var id = xmlDoc.evaluate('Id', book, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  if (id != null) {
    console.log(id.textContent);
  }
}

为简洁起见，我使用了多行字符串文字分隔符 `` 仅在实际浏览器中实现，但在 Mozilla、Chrome、Safari 和 Edge 的 DOM 实现中支持 XPath API。

【讨论】：

【解决方案2】：

使用xpath，您可以执行此操作来提取所有具有BookUser 后代的Book 元素（您需要寻找后代而不是孩子，因为您的BookUsers 包含在ListOfBookUser 标签中：

//Book[descendant::BookUser]

或

//Book[.//BookUser]

或者（正如@MartinHonnen 在 cmets 中展示的那样）：

//Book[ListOfBookUser/BookUser]

【讨论】：

感谢您的回答。但是如何在Javascript 中使用Xpath 呢？

【解决方案3】：

试试看：

[MDN]https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

[W3Schools]：http://www.w3schools.com/xsl/xpath_examples.asp

.evaluate 函数很有用。

【讨论】：