XPath spielt eine sehr wichtige Rolle in Octoparse, wenn Sie dabei Daten scrapen. Umschreiben des XPath kann Ihnen helfen, mit den fehlenden Seiten, Daten oder Duplikate usw. umzugehen. Während XPath am Anfang für die Benutzer/innen schwierig ausgesehen ist, machen Sie keine Sorgen darum. In diesem Artikel würde ich detailliert XPath vorstellen, damit Sie verstehen können, wie sie verwendet wird, um durch genaue und präzise Bauaufgaben Ihre gewünschten Daten zu scrapen.
1. Was ist XPath
XPath (XML Path Language) stellt für Selektieren der Elemente aus einem XML/HTML-Dokument eine Abfragesprache dar. Sie können schnell und präzis durch XPath ein Element aus dem ganzen Dokument finden.
Webseiten werden in der Regel in einer Sprache namens HTML geschrieben. Wenn Sie eine Webseite auf einen Browser (Chrome, Firefox usw.) laden, können Sie einfach beim Klick auf F12-Taste das entsprechende Dokument besuchen. Alles, das Sie auf der Webseite sehen könnten, könnte innerhalb des HTML gefunden werden, z.B. Bild, Textblöcke, Links, Menüs usw.
XPath ist die häufigst verwendete Sprache, wenn man ein Element in einem HTML-Dokument lokalisieren möchte. Es ist leicht zu verstehen, dass man durch es, das als „Route“ bezeichnet wird, innerhalb eines Dokumentes das Zielelement finden kann.
Um tiefer zu erklären, wie XPath funktioniert, schauen wir zusammen dieses Beispiel.
Das Bild zeigt einen Teil von einem HTML-Dokument.
HTML hat verschiedene Stufen von Elementen, gerade wie eine Baumstruktur. In diesem Beispiel gehört „bookstore“ zur Stufe-1 und „book“ zur Stufe-2. „Title“, „author“ und „price“ gehören zur Stufe-3.
Texte in spitzen Klammern (<bookstore>) werden einen Tag genannt. Ein HTML-Element besteht normalerweise aus einen Start-Tag und einen End-Tag, gleichzeitig werden die Texte zwischen den beiden liegen.
<tagname>Texte hier...</tagname>
XPath verwendet „/“ zur Verbindung der Tags von verschiedenen Stufen, die von oben bis unten, um die Stelle eines Elementes festzulegen. Wenn Sie das „author“ Element lokalisieren möchten, würde XPath in unseren Beispiele wie folgend aussehen:
/bookstore/book/author
Wenn Sie beim Verstehen seines Arbeitsprinzipes auf die Probleme gestoßen haben, können Sie daran denken, wie wir in unserem Gerät eine bestimmte Akte finden können.
Um die Akte mit dem Namen „author“ zu finden, ist der genaue Akte-Route „ \bookstore\book\author“. Kommt Ihnen das bekannt vor?
Jede Akte auf dem Gerät hat ihre eigene Route, wie die Elemente auf einer Webseite. Mit XPath können Sie schnell und einfach die Seitenelemente finden, gerade wie Sie eine Akte auf Ihrem Gerät finden.
Der XPath wird Absoluten XPath genannt, der vom Wurzelelement (dem obersten Element im Dokument) ausgeht und alle Elemente dazwischen zum Zielelement durchläuft.
Beispiel: „/html/body/div/div/div/div/div/div/div/div/div/span/span/span…“
Absolute Route könnte lang und verwirrend werden, sodass wir „//“ zur Vereinfachung des Absoluten XPath verwenden, um das Element zu referenzieren, womit Sie den XPath starten möchten (auch bekannt als ein kurzer XPath). Zum Beispiel könnte der kurze XPath „/bookstore/book/author“ als „//book/author“ beschrieben werden. Dieser kurze XPath würde das „book“ Element versuchen, während er von seiner absoluten Stelle in HTML unabhängig ist. Dann würde er eine Ebene nach unten gehen, um das Zielelement von „author“ zu finden.
2. Warum brauchen Sie während Verwendung von Octoparse XPath wissen
Es bedeutet eigentlich aus den Dukumenten von HTML die Extraktion der Elemente, Webseite mit Octoparse zu scrapen. XPath wird zur Lokalisierung der Zielelemente von Dokumenten verwendet. Als Beispiel schauen wir zusammen eine Aktion von Paginierung an.
Nachdem wir den Button von „Nächste“ ausgewählt haben, um eine Paginierung einzurichten, würde Octoparse einen XPath generieren, um den Button von „Nächste“ zu lokalisieren, sodass es erkennt, auf welchen Button geklickt werden sollte.
XPath kann dem Crawler helfen, auf den richtigen Button zu klicken oder die Zieldaten zu scrapen. Beliebige Aktion, die Sie Octoparse tun lassen möchten, basiert auf den zugrunde liegenden XPath. Octoparse könnte automatisch die XPaths generieren, aber der automatisch generierte XPath funktioniert nicht immer gut. Das ist die Ursache, warum wir lernen sollten, XPath umzuschreiben.
Während des Umgangs mit den Probleme, wie fehlenden Daten, unendlosem Loop, falschen Daten, Duplikaten, nicht funktioniertem Button von „Nächste“ und so weiter, gibt es eine gute Chance, dass Sie einfach durch die Umschreibung von XPath sie verändern.
3. Wie wird eine XPath beschrieben (einschließlich Cheat Sheet)
Bevor wir beginnen, einen XPath zu schreiben, schauen wir zuerst einige Schlüsselbegriffe.
Es gibt im folgenden ein leichtes HTML, das wir verwenden können.
Attribute/value
Ein Attribut (Attribute im Bild) bietet zusätzliche Information über ein Element an und wird immer im Start-Tag des Elements angegeben. Ein Attribut erscheint meistens als das Paar vom Namen/Wert, wie „name='value'“. Einige häufigst verwendete Attribute sind href, title, style, src, id, class usw. Sie können die vollständige HTML Attribute Referenz hier finden.
In unserem Beispiel ist „id='book'“ das Attribut vom Element <div> und „class='book_name'“ das Attribut vom Element <span>.
Parent/child/sibling
Wenn ein oder mehr HTML-Elemente sind in ein Element enthalten, würde das Element als das übergeordnete Element (Parent) bezeichnet, das die anderen Elemente enthält. Gleichzeitig wird jedes enthaltene Element als das untergeordnete Element (Child) des übergeordneten Elements bezeichnet. Jedes Element hat nur ein übergeordnetes Element, während es vielleicht null, ein oder mehr übergeordnete Elemente enthält. übergeordnete Elemente werden zwischen dem Start-Tag und dem End-Tag vom übergeordneten Element gefunden.
In unserem Beispiel ist das <body> Element das übergeordnete Element von den Elemente <h1> und <div>. Die Elemente von <h1> und <div> sind die übergeordnete Elemente vom Element vom <body>.
Das <div> Element ist das übergeordnete Element von zwei Elementen <span>. Die Elemente von <span> sind die übergeordneten Elemente vom Element <div>.
Elemente, die ein gleiches übergeordnetes Element haben, werden als Geschwister bezeichnet. Die Elemente von <h1> und <div> sind Geschwister, weil sie ein gleiches übergeordnetes Element <body> haben.
Die zwei Elemente von <span> sind auch Geschwister, die unter dem Element von <div> stehen.
Lassen wir zusammen einige häufige Beispiele ansehen!
Beschreibung eines XPath zur Lokalisierung von „Nächste“
Zuerst müssen wir den Button von „Nächste“ im HTML genau untersuchen. In dem folgenden Beispiel-HTML gibt es zwei hervorgehobene Sachen. Eine ist der Attribut mit dem Wert von „Nächste“ (Attribute im Bild). Der andere ist der Inhalt von „Nächste“ (Content im Bild).
In diesem Fall können wir sowohl das Attribut von „title“ als auch den Inhalt vom Text verwenden, um den Button von „Nächste“ in HTML zu lokalisieren.
Der XPath wird wie folgend aussehen, der das <a> Element lokalisiert, das ein Attribut von „title“ mit dem Wert „Nächste“: //a[@title="Next"]
Der XPath bedeutet: Gehen Sie auf das <a> Element(e), dessen title-Attribut „Next“ ist. Das Symbol @ wird im XPath verwendet, um auf ein Attribut abzuzielen.
Alternativ könnte der XPath wie folgend aussehen, der das <a> Element lokalisiert, das den Text von „Nächste“ enthält: //a[contains(text(), "Next")]
Der XPath bedeutet: Gehen Sie auf das <a> Element(e), dessen Inhalt „Next“ ist.
Sie können auch beide Elemente (title-Attribut und Inhalt) benutzen, um den XPath zu schreiben: //a[@title="Next" and contains(text(), "Next")]
Dieser XPath bedeutet: Gehen Sie auf das <a> Element(e), das(die) ein title-Attribut mit dem Wert „Nächste“ hat(haben) und dessen Inhalt „Nächste“ enthält.
Beschreibung eines XPath zur Lokalisierung von Loop Item
Um eine Liste der Items auf einer Webseite zu anvisieren, ist es besonders wichtig, unter den Listeneinträgen nach dem Muster zu suchen. Die Items in der gleichen Liste haben in der Regel die gleichen oder ähnlichen Attribute. In dem folgenden Beispiel-HTML sehen wir, dass alle Elemente ähnliche „class“ Attribute haben.
Aufgrund der Beobachtung können wir „contains(@attribute)“ verwenden, um alle Items der Liste zu anvisieren.
//li[contains(@class,"product_item")]
Der XPath bedeutet: Gehen Sie auf das <li> Element(e), dessen „class“ Attribute „product_item“ enthalten.
Beschreibung eines XPath zur Lokalisierung von Datenfelder
Es ist ganz ähnlich wie Lokalisierung des „Nächste“ Button, indem Sie „text()“ oder „attribute“ verwenden, ein bestimmtes Datenfeld zu lokalisieren.
Wenn wir einen XPath beschreiben möchten, der die Addresse vom obenen HTML-Beispiel lokalisiert könnte, können wir das „itemprop“ Attribut verwenden, das den „address“ Wert enthält, um das bestimmte Element zu anvisieren.
//div[@itemprop=”address”]
Der XPath bedeutet: Gehen Sie auf das <div> Element(e), welches das „itemprop“ Attribut mit dem „address“ Wert enthält.
Es gibt auch eine andere Beschreibungsform. Beachten Sie, dass das <div> Element, das die tatsächliche Adresse enthält, immer unter seinem gemeinsamen <div> Element gefunden wird, das den Inhalt „Location:“ enthält. So können wir zuerst den Text „Location“ finden und dann das erste Geschwister auswählen, das folgt.
//div[contains(text(),”Location”)]/following-sibling::div[1]
Der XPath bedeutet: Gehen Sie auf das <div> Element(e), welches das „Location“ im Text enthält, dann gehen Sie auf sein erstes Geschwister-<div>-Element.
Nun haben Sie vielleicht bereits notiert, dass es mehr als eine Methode gibt, um ein Element in HTML zu anvisieren. Es ist genauso wie das aussehen, dass es immer mehr als eine Route gibt, um ein beliebiges Gebiet einzugehen. Der Schlüssel besteht darin, das Tag, die Attribute, den Inhaltstext, die Geschwister, das übergeordnete Element und alles zu verwenden, was Ihnen hilft, das Zielelement im HTML zu finden.
Damit Sie ein besseres Verständnis dafür haben können, gibt es ein Cheat Sheet von hilfreichen XPath-Ausdrücken, um Ihnen zu helfen, dass Sie schnell jedes Element in HTML anvisieren können.
Ausdruck | Beispiel | Bedeutung |
* | //div/* | Selektieren Sie alle untergeordneten <div> Elemente. |
@ | //div[@id="book"] | Selektieren Sie alle <div> Elemente, die ein „id“ Attribut mit einem „book“ Wert enthalten. |
text() | //span[text()="Harry Potter"] | Selektieren alle <span> Elemente, deren Text exakt „Harry Potter“ enthält. |
contains() | //span[contains(@class, "price")] | Selektieren Sie alle <span> Elemente, deren „class“ Attribut-Wert „price“ enthalten. |
//span[contains(text(),"Learning")] | Selektieren Sie alle <span> Elemente, deren Inhalt „Learning“ enthalten. |
|
position() | //div/span[position()=2]//div/span[2] | Selektieren Sie das zweite <span> Element, welches das untergeordnete Element vom <div> Element ist. |
//div/span[position()<3] | Selektieren Sie die ersten 2 <span> Elemente, welche die untergeordneten Elemente vom <div> Element sind. |
|
last() | //div/span[last()] | Selektieren Sie das letzte <span> Element, welches das untergeordnete Element vom <div> Element ist. |
//div/span[last()-1] | Selektieren Sie das letzte aber ein <span> Element, welches das untergeordnete Element vom <div> Element ist. |
|
//div/span[position()>last()-3] | Selektieren Sie die letzten 3 <span> Elemente, welche die untergeordneten Elemente vom <div> Element sind. |
|
not | //span[not(contains(@class,"price"))] | Selektieren Sie alle <span> Elemente, deren „class“ Attribute-value „price“ nicht enthält. |
//span[not(contains(text(),"Learning"))] | Selektieren Sie alle <span> Elemente, deren Inhalt „Learning“ nicht enthält. |
|
and | //span[@class="book_name" and text()="Harry Potter"] | Selektieren Sie ale <span> Elemente, deren „class“ Attribute-value „book_name“ und deren Inhalt gleichzeitig „Harry Potter“ enthält. |
or | //span[@class="book_name" or text()="Harry Potter"] | Selektieren Sie alle <span> Elemente, deren „class“ Attribute-value „book_name“ oder deren Inhalt „Harry Potter“ ist. |
following-sibling | //span[text()="Harry Potter"]/following-sibling::span[1] | Selektieren Sie das erste <span> Element nach dem <span> Element, dessen Inhalt „Harry Potter“ ist. |
preceding-sibling | //span[@class="regular_price"]/preceding-sibling::span[1] | Selektieren Sie das erste <span> Element vor das <span> Element, dessen „class“ Attribute-value „regular_price“ ist. |
.. | //div[@id="bookstore"]/.. | Selektieren Sie das übergeordnete Element vom <div> Element, dessen „id“ Attribute-value „bookstore“ ist. |
| | //div[@id="bookstore"] | //span[@class="regular_price"] | Selektieren Sie alle <div> Elemente, deren „id“ Attribute-value „bookstore“ ist und alle <span> Elemente, deren „class“ Attribute-value „regular_price“ ist. |
*Beachten Sie, dass das Attribut und der Textwert alle Groß- und Kleinschreibung berücksichtigen.
*Um eine vollständigere Liste von den XPath-Ausdrücken zu sehen, klicken Sie hier.
4. Absoluter und Relativer XPath (für Loop)
Bisher haben wir behandelt, wie man einen XPath schreibt, wenn Sie ein Element von einer Webseite extrahieren müssen. Jetzt brauchen Sie vielleicht es zu tun, zuerst eine Liste der Ziel-Items einzurichten und dann die Daten aus jedem Item zu scrapen. Z.B. Wenn Sie die Daten aus den Ergebnisseiten wie das scrapen möchten: https://www.bestbuy.com/site/promo/tv-deals
In diesem Fall sollten Sie nicht nur den Absoluten XPath (,den Sie direkt zur Erfassung der Elemente verwenden könnten) sondern auch den Relativen XPath von Loop Item erlernen, der den Speicherort des bestimmten Listenelements relativ zur Liste angibt.
In Octoparse würden Sie zwei XPath-Kästen sehen, wenn Sie den XPath eines Datenfeldes modifizieren.
Absoluter XPath wird verwendet, wenn wir die Daten direkt aus der Webseite scrapen.
Notiz: Der Absolute XPath in Octoparse unterscheidet sich von dem oben genannten. Das bedeutet, die von Ihnen gescrapten Daten eine von der gesamten Website anstatt der Daten in der Schleife sind, und er könnte auch verkürzt werden, wie „//h1[@class="..."]/span[2]...“, anstatt das Komplettes „/html/body/div/div/div/div/div/div/span/span…“.
Tipp: Sie können auch den XPath-Typ und das Element des XPath auch einfach überprüfen, indem Sie die Datenvorschau in den Modus Vertikale Sicht umschalten.
Relativer XPath wird verwendet, wenn wir die Daten aus einem Loop Item scrapen möchten. Vor allem, wenn wir einen Workflow wie das folgende Bild einrichten:
Der Relative XPath in Octoparse ist ein zusätzlicher Teil des Element-XPath relativ zu Loop Item-XPath.
Zum Beispiel können wir den XPath //ul[@class="results"]/li verwenden, um die Liste zu lokalisieren, wenn wir eine Loop-Liste von <li> Elementen einrichten und ein Element scrapen möchten, das in den einzelnen <li> Elemente in der Liste enthalten ist.
Wenn der XPath eines Elementes auf der Liste //ul[@class="results"]/li/div/a[@class="link"] ist, sollte der Relative XPath in diesem Fall /div/a[@class="link"] werden. Oder wir können „//“ vor //a[@class="link"] hinzufügen, um diesen Relativen XPath zu vereinfachen. Es ist besser, „//“ zu verwenden, wenn ein Relativer XPath beschrieben wird, weil es den Ausdruck präziser werden lassen.
Machen wir es einfacher, die Beziehung zwischen den verschiedenen XPaths zu sehen.
Loop Item XPath: //ul[@class="results"]/li
XPath vom Element, das Sie verwenden möchten, um die Stelle in Loop Item zu lokalisieren: //ul[@class="results"]/li/div/a[@class="link"]
Relativer XPath zum Loop Item: /div/a[@class="link"]
Wir sollten dann den XPath von Loop Item und den Relativen XPath wie folgend in Octoparse eingeben:
Jetzt haben Sie vermutlich bereits notiert, dass Sie dort genau den XPath für das Element bekommen, wenn der XPath für die Schleifenliste und der relative XPath zu einem XPath kombiniert werden.
5. Vier einfache Schritte zur Festlegung Ihrer XPath
Schritt 1:
Öffnen Sie die Website, indem Sie einen Browser mit einem XPath-Tool verwenden (, das Ihnen es ermöglicht, HTML zu sehen und eine XPath-Abfrage nachzuschlagen). Path helper (ein Plug-in von Chrome) ist immer wertvoll zu empfehlen, wenn Sie Chrome verwenden.
Schritt 2:
Wenn die Website geladen ist, untersuchen Sie das Ziel-Element in HTML.
Schritt 3:
Untersuchen Sie das HTML-Element und die Elemente in der Nähe genau. Sehen Sie etwas, was hervorgehoben ist und Ihnen vielleicht helfen, das Ziel-Element zu identifizieren und lokalisieren? Es ist möglich, dass es ein „class“ Attribut wie class="sku-title" oder class="sku-header" gibt?
Verwenden Sie das obige Cheat sheet, um einen XPath zu schreiben, der das Element exklusiv und genau selektiert. Ihr XPath sollte nur das Ziel-Element(e) entsprechen. Bei der Verwendung von XPath helper können Sie immer überprüfen, ob der umgeschriebene XPath richtig funktionieren könnte.
Schritt 4:
Ersetzen Sie den automatisch generierten XPath in Octoparse.
Mehr Schritt-für-Schritt Tutorials hier lernen:
6. Tutorials von Fehlerbehebung der XPath
In mehreren Fällen brauchen Sie nicht selbst einen XPath zu schreiben. Aber es gibt einige Situationen, wo Sie vielleicht einige Modifikationen nehmen sollten, um die Daten exakt zu scrapen.
Situation 1: Fehlerbehebung von Loop
Situation 2: Fehlerbehebung von Paginierung
Situation 3: Fehlerbehebung von Feldern
7. Tools der XPath
Es ist nicht leicht, das HTML-Code direkt in Octoparse zu sehen. Deshalb sollten wir einige andere Tools verwenden, um einen XPath zu generieren.
Chrome/Jeder Browser
Sie können einen XPath für ein Element einfach mit jedem Browser erhalten. Lassen wir Chrome als Beispiel sehen.
Schritt 1: Öffnen Sie die Website in Chrome.
Schritt 2: Drücken Sie die rechte Maustaste auf das gewünschte Item, um den XPath zu finden.
Schritt 3: Wählen Sie „inspect“ und dann würden Sie Chrome DevTools sehen.
Schritt 4: Drücken Sie die rechte Maustaste auf das hervorgehobene Gebiet der Konsole.
Schritt 5: Gehen Sie zur „Copy“ -> „Copy XPath“
Aber man würde meistens durch „Copy XPath“ einen Absoluten XPath kopieren, wenn es kein Attribut gibt oder das Attribut-value zu lang ist. Sie brauchen wahrscheinlich noch selbst den korrekten XPath schreiben.
XPath Helper (hier downloaden)
XPath Helper ist ein hervorragendes Plug-in von Chrome, mit dem Sie XPath durch einfaches Schweben nachschlagen können, indem Sie einfach über das Element im Browser fahren. Sie können auch den XPath-Ausdruck direkt in der Console bearbeiten. Sie würden sofort die Ergebnisse bekommen, sodass Sie wissen können, ob Ihr XPath gut funktionieren könnte.
Für mehrere Tutorials über XPath: