Die Wahl des richtigen Selektors für Web Scraping: CSS oder XPath
Wissen Sie, welches der richtige Selektor für Web Scraping ist? Web Scraping ist in den letzten zehn Jahren sehr beliebt geworden, um Daten aus dem Internet zu extrahieren. Es hilft Unternehmen, Daten zu sammeln und zu analysieren, um bessere Geschäftsentscheidungen zu treffen. Dank automatisierter Technologien war Web Scraping noch nie so einfach wie heute.
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
Unabhängig von dem Tool oder Framework, das Sie auswählen, müssen Sie jedoch eine wichtige Entscheidung treffen, um sicherzustellen, dass Ihr Scraper die Daten korrekt ausliest. Das heißt, ob Sie Webelemente mit XPath oder CSS-Selektoren extrahieren, was Sie in diesem Artikel lernen werden.
Lassen Sie uns mit einigen Beispielen einsteigen.
Was ist ein XPath-Selektor?
XPath steht für XML Path Language. Es verwendet jedoch eine Nicht-XML-Syntax, um Tags oder Gruppen von Tags aus einem XML-Dokument oder HTML auszuwählen, wie beim Web Scraping. Mit XPath können Sie Ausdrücke schreiben, um direkt auf ein HTML- oder XML-Element zuzugreifen, ohne den gesamten HTML-Baum zu durchlaufen.
Um zu verstehen, wie Sie mit XPath auf ein Element zugreifen können, lassen Sie uns anhand eines HTML-Codes tiefer in die Materie einsteigen. Ich gehe davon aus, dass Sie bereits einige grundlegende HTML-Kenntnisse haben.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Sie können den obigen Code in einen Editor Ihrer Wahl eingeben und ihn als products.html speichern. Dann können Sie ihn in einem Browser anzeigen (vorzugsweise Google Chrome, mit dem wir dieses Beispiel durchgehen werden).
Wenn der Browser diesen Code ausführt, formuliert er den HTML-Code und erstellt eine Baumdarstellung der Elemente. Diese wird in der folgenden Form als DOM (Document Object Model) bezeichnet:
Unter dem angegebenen Link können Sie mehr über das DOM lesen. Wir konzentrieren uns hier auf den XPath, wie man zu jedem dieser Elemente direkt navigieren kann, ohne den gesamten Baum zu durchlaufen. Beginnen wir also mit der grundlegenden Terminologie des Xpath.
Was sind Knotenpunkte?
Bei XPath ist das grundlegendste Element ein Knoten. Nun, Knoten sind einfach die einzelnen Elemente, die Sie gerade im DOM-Baum gesehen haben. Im weiteren Verlauf dieses Artikels werden Sie feststellen, dass Knoten aus Tag-Elementen, Attributen, ihnen zugewiesenen Zeichenkettenwerten usw. bestehen. In jeder XML- oder HTML-Seite gibt es sieben Knoten, und wir wollen uns jeden dieser Knotentypen genauer ansehen.
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
Während die drei oben genannten die wichtigsten sind, ist es auch wichtig, die folgenden vier zu kennen, nur um der Information willen.
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- Kommentare: Dies sind die Kommentare in einem HTML- oder XML-Dokument, die der Compiler oder ein Parser nicht verarbeitet.
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
Welche Beziehung besteht zwischen den Knotenpunkten?
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
Wie findet man den XPath eines HTML-Elements?
Es gibt zwei Möglichkeiten, dies zu tun. Erstens, lassen Sie es uns demonstrieren oder ein Beispiel codieren. Wie ich bereits erwähnt habe, hoffe ich, dass Sie es auf Ihrer lokalen Festplatte gespeichert haben und es in Ihrem Browser anzeigen lassen können.
Wenn die Seite geladen ist, fahren Sie mit der Maus über Element 1 und klicken Sie mit der rechten Maustaste darauf. Wählen Sie dann aus den angezeigten Menüpunkten die Option "Prüfen" aus, wie in der Abbildung unten dargestellt:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Nach dem Einfügen in eine Textdatei oder an einem anderen Ort erhalten Sie dann die folgende Meldung:
/html/body/ul/li[1]
Dies wird als absoluter Pfad bezeichnet. Ich werde weiter unten erklären, wie Sie ihn abgeleitet haben.
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
Absoluter Pfad
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Obwohl die obige Methode langatmig erscheint, wird sie Ihnen helfen zu verstehen, wie man den vollständigen XPath aufbaut. Nun zu der relativen Methode.
Relativer Pfad
//*[@id="product-list"]/li[1]
As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
Der Unterschied zwischen relativen und absoluten Pfaden
Die wesentlichen Unterschiede sind, dass der vollständige XPath nicht lesbar und schwer zu pflegen ist. Das andere offensichtliche Problem ist, dass der absolute XPath nicht mehr gültig ist, wenn es Änderungen an einem Element gibt, das vom Stammelement ausgeht. Daher ist es sinnvoll, den relativen XPath zu verwenden.
Doch bevor wir uns weiter dazu äußern, wollen wir uns zunächst die Vor- und Nachteile ansehen.
Vor- und Nachteile von XPATH
Vorteile
Mit XPath müssen Sie sich keine Sorgen machen, wenn Sie den Namen eines Elements nicht kennen, denn Sie können die Funktion contains verwenden, um nach wahrscheinlichen Übereinstimmungen zu suchen. Daher können Sie bei der Abfrage nach Elementen, die Sie durchsuchen möchten, das DOM nach oben durchlaufen.
Ein weiterer großer Vorteil von CSS ist, dass es in älteren Browsern wie veralteten Versionen des Internet Explorer funktioniert.
Benachteiligungen
Wie Sie oben erfahren haben, ist sein größter Nachteil, dass er leichter zu brechen ist, wenn Sie die Elemente im Pfad ändern. Im Vergleich zu den CSS-Selektoren, die Sie im Folgenden kennenlernen werden, kann er schwer zu verstehen sein.
Außerdem ist die Leistung beim Abrufen von Elementen aus dem XPath ziemlich viel langsamer als die von CSS.
Was ist ein CSS-Selektor?
Wie Sie bereits wissen, steht CSS für Cascading Style Sheets, die für die Gestaltung von HTML-Elementen auf einer Webseite verwendet werden. Diese Stile umfassen die Anwendung von Farben auf Ihre Schriftart, Hintergrundbilder und Farben, die Ausrichtung und Positionierung von Elementen und die Vergrößerung/Verkleinerung von Abständen zwischen Absätzen.
Um einem HTML-Element einen Stil zuzuweisen, müssen Sie ihn über einen CSS-Selektor festlegen. Beginnen wir mit einem einfachen Beispiel, das mit dem Markup im nächsten Abschnitt beginnt.
Wie werden CSS-Selektoren erstellt?
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>
Hier ist also der CSS-Selektor für das obige Element:
- <h1>-selects by the element name <h1>
- #main-heading - #spezifiziert die ID des Elements
- .header-styles - Der Punkt steht für den Klassennamen
- [name="h1name"] - Sie können die Attribute in eckigen Klammern angeben.
Man kann sie auch kombinieren:
h1.header-styles-Dieser CSS-Selektor wählt h1-Elemente mit der Klasse header-styles aus.
Erweiterte Selektoren
Der Operator > wird verwendet, um Kinder auszuwählen. Im Gegensatz dazu wählt der Operator + das erste Geschwisterkind aus, und der Operator ~ wird verwendet, um alle Geschwisterkinder auszuwählen. Nachfolgend sind einige Beispiele aufgeführt:
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
Vor- und Nachteile der Verwendung von CSS-Selektoren
Vorteile
Im Gegensatz zu XPath, das von Beautiful Soup nicht unterstützt wird, werden CSS-Selektoren von den meisten effektiven Scraping-Bibliotheken unterstützt. Außerdem sind CSS-Selektoren im Gegensatz zu XPath einfacher zu erlernen und zu pflegen. Sie werden von fast allen Browsern unterstützt, mit Ausnahme von älteren Browsern unter Internet Explorer Version 8. Allerdings werden diese Browser heutzutage kaum noch verwendet.
Benachteiligungen
Auch wenn Sie die älteren Versionen des Internet Explorer aus der Gleichung herausnehmen, kann es immer noch zu Unstimmigkeiten bei der Darstellung in verschiedenen Browsern kommen.
Da es verschiedene CSS-Versionen gibt, können sie bei Entwicklern und Anfängern gleichermaßen für Verwirrung sorgen.
Ein weiterer wichtiger Faktor in der heutigen Webtechnologie ist die Sicherheit des CSS.
Was sind die Unterschiede zwischen CSS-Selektoren und XPath?
Der offensichtliche Unterschied zwischen XPath und CSS ist, dass XPath bidirektional ist. Das bedeutet, dass Sie sich im DOM-Baum in beide Richtungen bewegen können. Mit CSS können Sie jedoch nur vom übergeordneten Knoten zu den untergeordneten Knoten navigieren, was als eindimensionaler Fluss bezeichnet wird.
Wie in den vorangegangenen Abschnitten erörtert, ist XPath schwieriger zu pflegen und kein guter Kandidat für eine effektive Lesbarkeit. Andererseits kann XPath zwar in älteren Browsern funktionieren, aber die Art der Darstellung unterscheidet sich von einem Browser zum anderen.
In dieser Hinsicht ist der CSS also im Vorteil.
Welche der beiden Möglichkeiten sollten Sie wählen?
XPATH zeichnet sich dadurch aus, dass CSS nur in bestimmten Bereichen wie dem DOM-Baum von den Eltern zum Kind durchlaufen kann. Was die Geschwindigkeit anbelangt, ist CSS im Vorteil.
Der Geschwindigkeitsunterschied zwischen XPath und CSS zählt jedoch nicht viel, wenn es um Web Scraping geht. Es gibt noch andere Faktoren zu berücksichtigen, z. B. die Netzwerklatenz beim Web-Scraping.
CSS wäre Ihre erste Wahl, wenn es um Beautiful Soup geht, da es den XPath nicht unterstützt.
Schlussfolgerung
Es gibt keine eindeutige Antwort auf die Frage, welche Selektoren Sie für Ihr Web-Scraping-Projekt verwenden sollten. Wie Sie in diesem Artikel festgestellt haben, ist XPath in bestimmten Situationen im Vorteil, während CSS in anderen Situationen die Nase vorn hat.
Daher müssen Sie bestimmte wichtige Punkte berücksichtigen, wie z. B. das Traversieren, die Browserunterstützung und einige der technischen Möglichkeiten, die wir besprochen haben. Wir hoffen, dass Sie das Gelernte in der Praxis anwenden werden und dass Sie weitere Artikel lesen werden.