XPath und CSSPath sind Sprachen mit denen man Daten und Informationen aus Websites extrahieren kann. Dabei spricht man auch von “Scraping” und “Web Scraping”. Vor allem wenn man größere und gleiche Datenmengen aus den gleichen Quellen extrahieren muss, helfen XPath und CSSPath effizient und zeitsparend vorzugehen.
Document Object Model (DOM)
Basis für die Arbeit mit XPath und CSSPath stellt das Document Object Model, kurz DOM, dar. Dazu habe ich schon im Beitrag “JavaScript: DOM” ausführlich geschrieben, daher gibt es hier nochmal eine Kurz-Zusammenfassung.
Beim DOM handelt es sich um eine Baumstruktur des HTML-Dokuments. Sobald die HTML-Seite im Browser angekommen ist, muss der HTML-Code verarbeitet und interpretiert werden. Dieser Vorgang wird auch als “Parsing” bezeichnet. Der Parser verwandelt den HTML-Code in eine Objektstruktur, die aus verschiedenen Knoten (Nodes) besteht. Genau das ist das Document Object Model. Will man nun einzelne Daten und Informationen auslesen, so muss man genau diese “Nodes” ansteuern. XPath und CSSPath sind dabei die 2 Techniken, mit denen man das machen kann.
XPath
XPath steht für “XML Path Language”. Das XML steht wiederum für “Extensible Markup Language”. Die Baumstruktur wird bspw. als XML-Format angezeigt, sobald man eine Website aufruft und mittels F12 das DOM ausgibt.
Durch das XML ensteht eine hierarchische Baumstruktur, die Knoten enthält. Diese Knoten können nun mit XPath angesteuert werden. Möchte man nun den Inhalt einer H2 aus dem DOM auslesen, dann könnte die XPath-Angabe wie folgt aussehen:
/html/body/div/h2
An diesem Code sieht man die Verschachtelung, mit der sich XPath an der Baumstruktur herunterarbeitet. Die einzelnen Knoten werden mittels dem Schrägstrich getrennt. Möchte man nun Informationen auslesen, so gibt es 2 Möglichkeiten an den XPath-Code zu kommen:
- Man öffnet den DOM und arbeitet sich selbst von Knoten zu Knoten runter, bis man sich den gewünschten XPath zusammengeschrieben hat.
- Man wählt im DOM das gewünschte Elemente, klickt auf die rechte Maustaste, geht zu “Copy” und kopiert sich den XPath.
In den meisten Fällen wird man sich für die 2. Variante entscheiden, da man dadurch deutlich schneller ans Ziel kommt. Unter “Copy” gibt es aber 2 Arten des XPaths:
- XPath: Im Vergleich zum “Full XPath” nimmt diese Art eine Abkürzung zum Ziel.
- Full XPath: Hier wird der Weg vom Start bis zum Ziel ganz genau von Knoten über Knoten ausgegeben.
Was ist der Unterschied zwischen “XPath” und “Full XPath”? Beide Arten geben die gleichen Informationen aus, nur der Weg bis dorthin ist anders. Wenn ich meinen Vor- und Nachnamen aus der Autorenbox am Ende jedes Artikels ausgeben möchte, dann bekomme ich mit “Full XPath” folgenden Code:
/html/body/div[1]/div[2]/div[1]/div/div[1]/div/div[9]/div[1]/h5/span/a
“Full XPath” beginnt hier also beim html, geht dann zum body, arbeitet sich durch die verschiedenen div-Container bis der Code schließlich zum Ziel gelangt. Die Zahlen in eckigen Klammern – in meinem Fall bei den div-Containern – geben an, auf welches Element sich bezogen wird, wenn innerhalb der selben Hierarchie mehrere gleiche Elemente existieren.
Mit “XPath” bekomme ich hingegen folgenden Code:
//*[@id="content"]/div/div[9]/div[1]/h5/span/a
Mit “//*[@id=”content”]” wird zunächst auf ein beliebiges Element (dafür sorgt das //*) innerhalb des DOMs zugegriffen, der “id=content” als Attribut verwendet. In meinem Fall wäre das “<div id=”content” class=”eightcol”>”. “XPath” steigt hier also direkt irgendwo im DOM ein, während “Full XPath” immer zunächst mit “html” beginnt. Für “XPath” ist es aber wichtig, dass der Startpunkt ein genau benanntes Element ist. In meinem Fall war es die Container-ID, genauso könnte es aber auch ein Klassenname sein. Dabei muss man nur beachten, dass ein Klassenname im Dokument mehrmals vorkommen kann, eine ID kann nur einmal vergeben werden. Der weitere Code nach “//*[@id=”content”]” ist dann der Weg zur gewünschten Information.
CSSPath
CSSPath funktioniert ähnlich wie XPath. Mit CSSPath können jedoch Daten und Informationen auf Basis von CSS-Selektoren gezogen werden. Wie bei XPath kann man auch bei CSSPath über Klassennamen und Container-IDs auf Knoten zugreifen.
Den CSSPath bekommt man ebenfalls im DOM, wenn man per rechter Maus auf das gewünschte Elemente klickt und sich danach zu “Copy” bewegt. Hier klickt man dann im Menü auf “Copy selector”. Wenn ich mir den CSSPath meines Vor- und Nachnamens aus der Autorenbox hole, bekomme ich folgenden Code:
#content > div > div.postinfo.p-border > div.postauthor.rad.vcard.author.dekoline > h5 > span > a
Mit der Raute wird zunächst auf den ID-Namen zugegriffen. Danach folgt ein div-Element, worauf wieder ein div-Element folgt. Das zweite div-Element ist jedoch mittels Klassennamen – durch Punkte getrennt – spezifiziert. Würde es wie beim XPath mehrere gleichnamige Elemente innerhalb der selben Hierarchie geben, so wären diese bei CSSPath mit “:nth-child(nummer)” eindeutig sichtbar.
Funktionen
Bei XPath und CSSPath können verschiedene Funktionen eingesetzt werden:
- “//*” spricht ein beliebiges Element an, wie wir schon gesehen haben.
- Mit “contains” kann definiert werden, dass bestimmte Werte enthalten sein müssen.
- “starts-with” definiert Werte, die am Anfang stehen müssen.
- Etc.
Ein große Liste an zur Verfügung stehenden Funktionen findet man auf der mozilla.org-Seite.
Tools
Hat man nun den XPath und CSSPath herausgefunden, müssen die Daten nur noch extrahiert werden. Dabei können folgende Tools helfen:
- Google Sheets: Mit der Funktion “IMPORTXML(“URL”; “XPath”) lassen sich Informationen von Websites ziehen.
- Website-Crawler: Viele Website-Crawler, die es aktuell auf dem Markt gibt, bieten die Möglichkeit XPath- und CSSPath-Angaben während des Crawls mitzugeben. Die Daten werden dann extrahiert.
