wake-up-neo.net

Wie kann ich mit XPath ein Element nach CSS-Klasse finden?

Auf meiner Webseite befindet sich ein div mit einem class mit dem Namen Test.

Wie finde ich es mit XPath?

253
Strawberry

Dieser Selektor sollte funktionieren, ist jedoch effizienter, wenn Sie ihn durch Ihr geeignetes Markup ersetzen:

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

Oder, da wir wissen, dass das gesuchte Element ein div ist:

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

Aber da dies auch Fälle wie class="Testvalue" oder class="newTest", @ Tomalaks Version in den Kommentaren ist besser:

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

Wenn Sie wirklich sicher sein möchten, dass es richtig übereinstimmt, können Sie auch die Funktion zum Normalisieren des Leerzeichens verwenden, um Leerzeichen um den Klassennamen herum zu entfernen (wie von @Terry erwähnt):

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

Beachten Sie, dass in all diesen Versionen das * am besten durch den Namen des Elements ersetzt werden sollte, mit dem Sie tatsächlich übereinstimmen möchten, es sei denn, Sie möchten jedes einzelne Element im Dokument nach der angegebenen Bedingung durchsuchen.

412
meder omuraliev

Der einfachste Weg ..

//div[@class="Test"]

Angenommen, Sie möchten <div class="Test"> wie beschrieben.

133
Olli Puljula

Ich gebe dies nur als Antwort, wie Tomalak vor langer Zeit als Kommentar zu Meders Antwort gegeben hat

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

Der [~ # ~] einzige [~ # ~] richtige Weg, dies mit XPath zu tun:

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

Die Funktion normalize-space entfernt führende und nachfolgende Leerzeichen und ersetzt auch Folgen von Leerzeichen durch ein einzelnes Leerzeichen.


Hinweis

Wenn Sie nicht viele dieser Xpath-Abfragen benötigen, können Sie eine Bibliothek verwenden, die CSS-Selektoren in XPath konvertiert, da CSS-Selektoren in der Regel leichter zu lesen und zu schreiben sind als XPath-Abfragen. In diesem Fall könnten Sie zum Beispiel div[class~="foo"] und div.foo, um das gleiche Ergebnis zu erhalten.

Einige Bibliotheken, die ich finden konnte:

18
John Slegers

Eine hilfreiche Funktion kann aus vorherigen Antworten gemacht werden:

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

Dann binden Sie den Funktionsaufruf einfach in Ihre Abfrage ein.

1
Carcigenicate