web-dev-qa-db-ja.com

XPathを使ってCSSクラスで要素を見つける方法は？

私のWebページには、divという名前のclassがあるTestがあります。

XPathでどのように見つけることができますか？

htmlcssxmlxpath
245
Strawberry

このセレクターは機能するはずですが、適切なマークアップに置き換えるとより効率的になります。

//*[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 ')]

これらすべてのバージョンで、与えられた条件で文書内のすべての要素を検索したいのでなければ、*は実際に一致させたい要素名に置き換えてください。

393
meder omuraliev

最も簡単な方法.

//div[@class="Test"]

説明どおりに<div class="Test">を見つけたいとします。

127
Olli Puljula

Tomalakがずっと以前にmederの回答へのコメントとして提供していたように、私はただ回答としてこれを提供しています。

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

XPathでそれを行う正しい方法ONLY：

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

関数normalize-spaceは、先頭と末尾の空白を取り除き、空白文字のシーケンスを単一の空白で置き換えます。

注意

これらのXpathクエリをあまり必要としないのであれば、CSSセレクタは通常XPathクエリよりも読み書き両方が簡単なので、CSSセレクタをXPathに変換するライブラリを使用することをお勧めします。たとえば、この場合、同じ結果を得るためにdiv[class~="foo"]とdiv.fooの両方を使用できます。

私が見つけることができたいくつかのライブラリ：

17
John Slegers

前の答えから役に立つ機能を作ることができます。

function matchClass($className) {
    return "[contains(concat(' ', normalize-space(@class), ' '), ' $className ')]";
}

その後、関数呼び出しをクエリに連結してください。

1
Carcigenicate