通过属性值获取元素

Posted

技术标签:

【中文标题】通过属性值获取元素【英文标题】: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>

如您所见,&lt;Book&gt; 的某些元素有一个子 &lt;BookUser&gt;,而其他元素没有这个子元素。

我需要一种方法来提取具有&lt;BookUser&gt; 子级的&lt;Book&gt; 元素与regular expressionsDOMXpath。请问有什么建议吗?

【问题讨论】:

Xpath for xml 肯定 有一些Book 元素带有BookUser 孙子,我没有看到任何有这个名字的子元素。 XPath 将 //Book[ListOfBookUser/BookUser]. 但是如何在 Javascript 中使用 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 函数很有用。

【讨论】:

以上是关于通过属性值获取元素的主要内容,如果未能解决你的问题,请参考以下文章

通过属性值获取元素

如何通过赋予属性jQuery的值获取html元素

jquery获取改变元素属性值

python+appium获取app元素属性值

通过php中的属性值获取HTML元素

jQuery 按属性值获取/选择元素