複数のクラス名を持つ Div 要素をクエリするにはどうすればよいですか?

複数のクラス名による Div 要素のクエリ

Web 要素に複数のクラス名があるシナリオでは、className とスペースを使用したクエリは、値を分離することは機能が制限されているため実行できません。この問題に対処するために、いくつかの代替アプローチが利用可能です。

XPath ロケーター:

XPath では、要素の識別に複数の基準を使用できます。たとえば、次の式は、「value」クラスと「test」クラスの両方の要素に一致します。

//div[contains(@class, 'value') and contains(@class, 'test')]

CSS セレクター:

CSS セレクターは、簡潔で簡潔な機能を提供します。効率的な代替手段。 「*」文字を使用して、クラス名の内の任意の値と一致させることができます。

div[class*='value test']

指定されたクラスの順序が重要でない場合は、次のセレクターを使用できます:

div.value.test

カスタム実装:

より複雑なクエリの場合は、次のカスタム実装を使用します。 JavaScript またはブラウザ API が必要になる場合があります。

例:

次の HTML 構造を考えてみましょう:

<div class="value test"></div>
<div class="value test     "></div>
<div class="first value test last"></div>
<div class="test value"></div>

次の表は、HTML 構造がどのように異なるかを示しています。アプローチは次の要素に一致します:

Approach	Matching Elements
By.xpath("//div[@class='value test']")	1
By.xpath("//div[contains(@class, 'value test')]")	1, 2, 3
By.cssSelector("div[class='value test']")	1
By.cssSelector("div[class*='value test']")	1, 2, 3
By.cssSelector("div.value.test")	1, 2, 3, 4

特定の要素に最も適切なアプローチを選択することによって識別が必要な場合、開発者は複数のクラス名を持つ Web 要素を効率的に見つけることができます。

以上が複数のクラス名を持つ Div 要素をクエリするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。