Schauen wir uns einmal die XPaths im Detail an, damit Sie verstehen, was hier passiert.
XPath: //*[@id="books"]/div[1]/div/div/div[2]/div
//*[@id="books"] ist als eine zusammenhängende Angabe zu sehen. Durch //* wird ein beliebiger Knoten unabhängig von seiner Position im Baum angesprochen, der als Attribut (wird durch das @ definiert) id=“books“ verwendet. Dieser Ausdruck wird von <section class=“books detail“ id=“books“> gematcht. Anstelle von section hätte auch jedes andere Element kommen können.
Die nun nachfolgenden Angaben beziehen sich auf nicht genauer benannte DIV-Container. Genauer spezifiziert werden könnten diese beispielsweise durch ihre Klassennamen (wie class=“klassenname“) oder gar eine ID (beispielsweise id=“idname“). Hinter manchen DIV steht in eckiger Klammer eine Zahl. Diese Zahl definiert, auf welches gefundene Element sich bezogen wird, wenn auf derselben Hierarchiestufe mehrere dieser Elemente vorhanden sind. Klingt kompliziert? Dann schauen wir uns ein Beispiel an!
Innerhalb der <section> (siehe Abbildung 7) befinden sich die beiden DIV-Container <div class="cover cover-left cover-light"> sowie <div class="intro-text"> auf derselben Ebene – sprich, sie sind nicht ineinander verschachtelt. Durch //*[@id="books"]/div[1]/ zeigt die Referenz auf das im Quelltext zuerst kommende DIV – in diesem Fall also <div class="cover cover-left cover-light">. Analog sind die weiteren Angaben zu lesen.
Full XPath: /html/body/main/section/div[1]/div/div/div[2]/div
Schauen wir noch auf die zweite Variante, die bei Chrome als Full XPath benannte Referenz. Diese ist mit dem bereits vermittelten Wissen einfacher nachzuvollziehen, da der Weg durch die Baumstruktur genau benannt wird. Als Pfad wird angegeben, dass innerhalb des Knotens <html zu <body und so weiter durchnavigiert werden soll. Die Ansprache der DIV-Container ist mit der ersten Variante identisch.
Die Frage ist jetzt, ob das nicht auch einfacher geht. Denn was ist, wenn sich der Quelltext verändert und z. B. noch ein weiterer DIV-Container im Quelltext vorkommt – oder gar eine Hierarchiestufe herausgelöscht wird? Dann würde der Zeiger ins Leere deuten.
Und es geht einfacher! Durch den Bezug auf z. B. Klassennamen oder gar IDs können XPaths kürzer und dennoch genauer beschrieben werden. Zur Information: In einem HTML-Dokument darf ein Klassenname mehrfach verwendet werden, eine ID allerdings nur einmal.
Schauen wir nochmals auf den Quelltext in Abbildung 7. Wir wollen uns auf den Breadcrumb beziehen – dieser ist innerhalb eines DIV-Containers zu finden, der den Klassenamen class=“breadcrumb“ trägt. Durch den XPath //div[@class="breadcrumb"] könnten wir folglich die Referenz auf diesen Bereich setzen.
So viel zur Theorie! Wenn Sie mehr über die Syntax von XPath finden möchten, dann kann ich Ihnen das W3schools-Tutorial unter www.w3schools.com/xml/xpath_syntax.asp empfehlen.
Was Sie über CSSPath wissen müssen
Der Syntax von XPath ähnlich sind die CSSPath-Selektoren. Für das Styling von Websites werden CSS-Angaben eingesetzt. CSS steht dabei für Cascading Style Sheets, ins Deutsche in etwa mit mehrstufige Formatvorlagen zu übersetzen. Mehrstufig deshalb, weil sich Styling-Angaben vererben oder weiter spezifiziert werden können, um z. B. nur einen einzelnen Absatz anders darzustellen.
Innerhalb von CSSPath kann ebenfalls über die Klassen- oder ID-Namen auf einzelne Knoten zugegriffen werden. Für das bereits bekannte Beispiel des Breadcrumb-Pfads ist #books > div.cover.cover-left.cover-light > div > div > div.col-md-8.col-xs-12 > div ein möglicher CSSPath.
Durch das vorangestellte Rautezeichen wird sich auf eine ID bezogen, durch die Punkte werden die Klassennamen bestimmt. Während bei XPath das x-te Element über den Wert in eckigen Klammern definiert wurde, gibt es bei CSSPath die Angabe nth-child (Nummer). Um den CSSPath eines Knotens zu erhalten, können Sie wiederum auf die Inspector-Tools von Firefox, Chrome und Co. zurückgreifen. In der aktuellen Chrome-Version ist der CSSPath als „Copy Selector“ benannt.
Werfen Sie zur Vertiefung gerne einen Blick auf www.w3schools.com/cssref/trysel.asp.
Fortgeschrittene Möglichkeiten von CSSPath und XPath
Ob Sie CSSPath oder XPath verwenden, ist egal – CSSPath wird nachgesagt, dass die Suche im Vergleich etwas schneller abläuft. Bei normalen Anwendungen sollten Sie jedoch keinen Unterschied feststellen können.
Neben den hier als Beispiele verwendeten einfachen Selektoren können sowohl CSSPath als auch XPath deutlich verfeinert werden. Über Operatoren wie „contains“ können z. B. nur bestimmte Elemente extrahiert werden. Anstatt beispielsweise jegliches iframe zu extrahieren, kann mittels des XPath //iframe[contains(@src ,'www.youtube.com/embed/')] definiert werden, dass nur iframes von Youtube-Videos extrahiert werden.
Weitere Beispiele gefällig?
- //div[@class=“artikel“]/p[last()-1] sorgt dafür, dass der vorletzte Paragraf angesprochen wird.
- //a[starts-with(@href,'mailto')] extrahiert E-Mail-Adressen aus Webseiten.
- tr:nth-child(even) spricht mittels CSSPath geradzahlige Tabellenreihe (tr für tablerow) an, also 2,4,6, …
- //a[not(contains(@href, 'google.de'))]/@href liefert alle Links, die nicht auf google.de zeigen.
- /descendant::h2[position() >= 0 and position() <= 3] extrahiert die ersten drei H2-Überschriften.
Mehr über Operatoren finden Sie unter www.w3schools.com/cssref/css_selectors.asp sowie einfach.st/sikiself4.
