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.
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.
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.
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. Unser Hauptaugenmerk liegt nun auf dem XPath, wie man zu jedem dieser Elemente direkt navigieren kann, ohne den gesamten Baum zu durchqueren. Beginnen wir also mit der grundlegenden Terminologie des Xpath.
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.
Während die drei oben genannten die wichtigsten sind, ist es auch wichtig, die folgenden vier zu kennen, nur um der Information willen.
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.
Schritt 1 => li[1] //Hier steht eins für das erste li-Element
Schritt 2 => /li[1]
Schritt 3 => ul/li[1]
Schritt 4 => /ul/li[1]
Schritt 5 => body/ul/li[1]
Schritt 6 => /body/ul/li[1]
Schritt 7 => html/body/ul/li[1]
Schritt 8 => /html/body/ul/li[1]
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.
//*[@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.
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.
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.
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.
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.
<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:
Man kann sie auch kombinieren:
h1.header-styles-DieserCSS-Selektor wählt h1-Elemente mit der Klasse header-styles aus.
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:
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.
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.
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.
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.
Es gibt keine eindeutige Antwort auf die Frage, welche Selektoren Sie für Ihr Web Scraping-Projekt verwenden sollten. Wie Sie in diesem Artikel entdeckt 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.