如何用XPath通过CSS类找到元素?

在我的网页中，有一个名为Test的div和class。

如何用XPath找到它?

503752 次浏览
小开
最佳答案

这个选择器应该工作，但如果你用适合的标记替换它会更有效:

//*[contains(@class, 'Test')]

或者，因为我们知道所寻找的元素是div:

//div[contains(@class, 'Test')]

但由于这也会匹配class="Testvalue"或class="newTest"这样的情况，@Tomalak在注释中提供的版本是更好的:

//div[contains(concat(' ', @class, ' '), ' Test ')]

如果你真的希望它能正确匹配，你也可以使用normalize-space函数来清理类名周围的空白字符(正如@Terry提到的那样):

//div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')]

注意，在所有这些版本中，*最好替换为您实际希望匹配的任何元素名称，除非您希望搜索文档中的每个元素以获得给定条件。

小开

我只是提供一个答案，就像Tomalak在很久以前对meder的回答所做的评论一样

//div[contains(concat(' ', @class, ' '), ' Test ')]
小开

最简单的方法。

//div[@class="Test"]

假设你想找到<div class="Test">如上所述。

小开

使用XPath的只有正确方法:

//div[contains(concat(" ", normalize-space(@class), " "), " Test ")]

normalize-space函数去除前导空格和尾随空格，并将空格字符序列替换为单个空格。

请注意

如果不需要很多这样的Xpath查询，您可能希望使用一个将CSS选择器转换为Xpath的库，因为CSS选择器通常比Xpath查询更容易读写。例如，在这种情况下，你可以使用选择器div.Test来获得完全相同的结果。

我找到了一些图书馆:

小开

匹配有空格的一个类。

<div class="hello "></div>

//div[normalize-space(@class)="hello"]
小开

XPath有一个contains-token函数，在这种情况下专门设计的:

//div[contains-token(@class, 'Test')]

它只在XPath的最新版本(3.1)中得到支持，因此您需要一个最新的实现。

小开

从XPath 2.0开始，你可以使用一个标记化函数:

//div[tokenize(@class,'\s+')='Test']

这里它将在空白区域进行标记，然后将结果字符串与'Test'进行比较。

它是XPath 3.1函数contains-token()的替代方法

但是目前(2021-04-30)没有浏览器支持XPath 2.0或更高版本。

小开 
//div[@class[contains(.,'Test')]]

这是我在我当前的项目中使用的，它工作平稳。

表达式中的点.表示任意div元素的class属性的值。所以你不需要使用normalize-space和concat。注意，这也可能选择类名为XXXTestXXX的div。我碰巧有我的可搜索类infobox-header和页面没有任何类似XXinfobox-headerXXXX。


提交答案