XPath vs. CSS-Selektoren
Mihai Maxim am 25. April 2023
XPath vs. CSS
Als Liebhaber des Web Scraping sind Sie wahrscheinlich schon einmal auf die Begriffe XPath und CSS-Selektoren gestoßen. Dies sind zwei beliebte Methoden zum Navigieren und Extrahieren von Elementen aus einem HTML- oder XML-Dokument, aber was genau sind sie und wie unterscheiden sie sich? In diesem Artikel stelle ich XPath- und CSS-Selektoren einander gegenüber und erörtere ihre Funktionen und Anwendungsfälle.
Wir beginnen mit einem kurzen Überblick über XPath- und CSS-Selektoren und zeigen anhand von Beispielen, wie sie zum Navigieren und Extrahieren von Elementen aus einem HTML-Dokument verwendet werden können. Wir werden uns mit den Unterschieden in der Syntax und den Möglichkeiten befassen und uns die verschiedenen eingebauten Funktionen von XPath ansehen und wie man die gleichen Ergebnisse mit CSS und JavaScript erzielen kann. Wir werden auch die Vor- und Nachteile der einzelnen Methoden erörtern und entscheiden, welche Methode Sie für Ihr Projekt verwenden sollten.
Also, schnappen Sie sich ein Notizbuch, spitzen Sie Ihren Bleistift an und machen Sie sich bereit, in die Welt von XPath und CSS-Selektoren einzutauchen!
Übersicht Selektoren
XPath, die Abkürzung für XML Path Language, ist eine Abfragesprache, mit der man durch ein XML-Dokument navigieren kann. Sie wurde erstmals 1999 eingeführt, um eine Standardmethode für den Zugriff auf Elemente innerhalb eines XML-Dokuments zu schaffen. Die Sprache basiert auf dem Konzept eines "Pfades", der dazu dient, bestimmte Elemente anhand ihrer Position im Dokument auszuwählen.
Eines der Hauptmerkmale von XPath ist die Verwendung der Pfadnotation. Mit dieser Notation können Sie Elemente auf der Grundlage ihrer Position im Dokumentbaum auswählen. In einem HTML-Dokument würde zum Beispiel der Pfad "html/body/p" alle p-Elemente auswählen, die direkte Kinder des body-Elements sind, das wiederum ein direktes Kind des html-Elements ist.
Die Syntax für XPath ist ziemlich einfach:
//tagname[@attribute='value']
Dabei ist "tagname" der Typ des gesuchten HTML-Elements (z. B. div, a, p), "attribute" eine Eigenschaft des gewünschten HTML-Elements, nach der unser Locator die Suche durchführt (z. B. class), und "value" der spezifische Wert, den Sie abgleichen möchten.
CSS-Selektoren, kurz für Cascading Style Sheets, werden verwendet, um Elemente auf der Grundlage ihrer Eigenschaften, wie Klasse, id und Attribute, auszuwählen. Sie sind einfacher zu lesen und zu verstehen als XPath, aber sie sind in ihrer Fähigkeit, durch das Dokument zu navigieren, begrenzt. CSS-Selektoren werden hauptsächlich für die Gestaltung und das Layout verwendet, aber Sie können sie auch nutzen, um Informationen aus einer Webseite zu extrahieren:
<html> <body> <p class="highlight">Hello, world!</p> </body> </html>
|
Um den Text "Hello, world!" mit CSS-Selektoren auszuwählen, müssen wir Javascript verwenden:
let p_tag = document.querySelector("p.highlight")
let p_text = p_tag.innerTextXPath hingegen wurde speziell als Abfragesprache für XML-Dokumente entwickelt und verfügt über eine breite Palette integrierter Funktionen. Mit diesen Funktionen können Sie Berechnungen durchführen und spezifische Informationen aus den Elementen extrahieren. Mit der Funktion text() von XPath können Sie zum Beispiel direkt den Textwert eines Elements auswählen:
<html> <body> <p>Hello, world!</p> </body> </html>
Um den Text "Hello, world!" mit der Funktion text() in XPath auszuwählen, würde der Ausdruck lauten:
/html/body/p/text()
Zusätzliche Ressourcen
Wenn Sie tiefer in die Welt von XPath und CSS-Selektoren eintauchen möchten, haben wir einige Artikel, die Ihnen dabei helfen können. Der erste Artikel behandelt die Grundlagen von XPath-Selektoren, einschließlich der Syntax, Funktionen und der Navigation im DOM-Baum. Der zweite Artikel befasst sich mit den Grundlagen von CSS-Selektoren, einschließlich der verschiedenen Arten von Selektoren.
Aufstellung eines Beispiels
Um die Hauptunterschiede zwischen XPath- und CSS-Selektoren zu verdeutlichen, wollen wir eine HTML-Struktur als Beispiel analysieren:
<!doctype html>
<html>
<head>
<title>Top News</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Top News Stories</h1>
<div class="container">
<div class="news-story">
<h2> <a href="https://edition.cnn.com/2022/12/28/weather/buffalo-winter-storm-new-york-blizzard-wednesday/index.html">Winter Storm</a> </h2>
<p>Winter storm death toll rises to 37 in Buffalo as criticism arises over handling of storm and cleanup</p>
</div>
<div class="news-story">
<h2> <a href="https://www.nbcnews.com/politics/politics-news/spacex-leader-reassured-nasa-chief-elson-musk-rcna61189">SpaceX</a> </h2>
<p>NASA chief: SpaceX leader says Elon Musk’s Twitter drama is ‘nothing to worry about’.</p>
</div>
</div>
</body>
</html>
Testen der Selektoren in den Developer Tools
Das Testen von XPath- und CSS-Selektoren in den Entwicklertools ist eine schnelle und einfache Methode, um zu überprüfen, ob Ihre Selektoren korrekt funktionieren. Der Prozess ist in den meisten modernen Browsern ähnlich, aber für dieses Beispiel werden wir Google Chrome verwenden.
Öffnen Sie zunächst die Webseite, auf der Sie Ihre Selektoren testen möchten, in Google Chrome. Klicken Sie dann mit der rechten Maustaste auf ein Element, das Sie auswählen möchten, und wählen Sie im Kontextmenü die Option "Untersuchen". Daraufhin wird das Fenster mit den Entwicklertools geöffnet:
Im Fenster der Entwicklertools sehen Sie auf der linken Seite den HTML-Quellcode der Webseite und auf der rechten Seite die entsprechende gerenderte Webseite.
Um den vollständigen XPath- und CSS-Selektor eines Elements zu finden, klicken Sie mit der rechten Maustaste auf das Element in der HTML-Datei und wählen Sie "Kopieren > Vollständigen XPath kopieren" oder "Kopieren > Selektor kopieren". Dadurch wird der vollständige Pfad zum Element, einschließlich aller übergeordneten Elemente, in die Zwischenablage kopiert. Sie können diesen Pfad dann in Ihren Code oder in die Suchleiste der Entwicklertools (Strg+f) einfügen, um auf das Element zuzugreifen.
Wenn Sie z. B. alle h2-Tags aus dem oben genannten Beispiel auswählen möchten, geben Sie "//h2" in die Suchleiste ein und drücken die Eingabetaste.
Die wichtigsten Schlussfolgerungen
Einer der Hauptunterschiede zwischen XPath und CSS ist, dass XPath Elemente auf der Grundlage ihrer Position im Dokument auswählen kann. CSS-Selektoren sind auf die Auswahl von Elementen anhand ihrer Eigenschaften beschränkt.
In XPath können wir zum Beispiel das zweite div-Element mit der Klasse news-story mit dem Ausdruck //div[@class='news-story'][2] auswählen. Mit CSS-Selektoren können wir es nur mit div.news-story:nth-child(2) auswählen .
div.news-story:nth-child(2) wählt das zweite div-Element unter allen div-Elementen aus, die die Klasse "news-story" haben und Kinder desselben Container-Elements sind.
//div[@class='news-story'][2] ermöglicht es Ihnen, das Element anhand seiner Position im gesamten Dokument auszuwählen. Das Element muss nicht das Kind eines bestimmten Container-Elements sein:
<html>
<body>
<div class="container">
<div class="news-story">
<h2>News Story 1</h2>
</div>
</div>
<div class="container">
<div class="news-story">
<h2>News Story 2</h2>
</div>
</div>
</body>
</html>
In diesem speziellen Beispiel wählt div[@class='news-story'][2] die zweite Meldung aus.
div.news-story:nth-child(2) wählt nichts aus, da jedes Container-Element nur ein direktes Kind hat.
Größere Flexibilität
XPath ermöglicht eine größere Flexibilität beim Navigieren im DOM-Baum. Es bietet die Möglichkeit, sich im Baum nach oben und unten zu bewegen. CSS-Selektoren erlauben nur eine Navigation nach unten. Das macht XPath leistungsfähiger und vielseitiger, aber auch komplexer.
Mit XPath können Sie Achsen wie die Eltern- und Vorfahrenachse verwenden, um auf die Eltern oder Vorfahren eines Elements zuzugreifen, was mit CSS-Selektoren nicht möglich ist.
Der XPath-Ausdruck //div[@class='news-story'][1]/parent::*//h2 wählt zum Beispiel das erste div-Element mit der Klasse "news-story" aus. Anschließend wird mit dem Operator parent::* zum übergeordneten Element navigiert und das h2-Element innerhalb dieses übergeordneten Elements ausgewählt.
Alternativ können Sie auch eckige Klammern verwenden, um das übergeordnete Element des ersten div-Elements mit der Klasse "news-story" auszuwählen, und dann das h2-Element innerhalb dieses übergeordneten Elements mit //div[@class='news-story'][1]/..//h2 auswählen .
Eingebaute Funktionen
Ein weiterer wichtiger Unterschied zwischen XPath- und CSS-Selektoren besteht darin, dass XPath über eine breite Palette integrierter Funktionen verfügt, z. B. count(), sum(), string(), substring() und contains(). Diese Funktionen können verwendet werden, um Elemente zu manipulieren und Daten zu extrahieren.
count() kann verwendet werden, um die Anzahl der Elemente zu zählen, die bestimmten Kriterien entsprechen. Um zum Beispiel die Anzahl der div-Elemente mit der Klasse news-story zu zählen, kann der XPath-Ausdruck count(//div[@class='news-story']) verwendet werden .
Das CSS- und JavaScript-Gegenstück wäre:
document.querySelectorAll('div.news-story').lengthsum() kann verwendet werden, um die Summe eines bestimmten Wertes für eine Gruppe von Elementen zu berechnen, die bestimmten Kriterien entsprechen. Um zum Beispiel die Gesamtzahl der Zeichen im Textinhalt aller p-Elemente zu berechnen, kann der XPath-Ausdruck sum(//p/text()/string-length()) verwendet werden .
Die CSS- und JavaScript-Entsprechungen wären:
var sum = 0;
var elements = document.querySelectorAll('p');
elements.forEach(function(element) {
sum += element.innerText.length;
});
console.log(sum);
substring() kann verwendet werden, um einen Teilstring aus einer Zeichenkette zu extrahieren. Um zum Beispiel das zweite bis fünfte Zeichen des Textinhalts eines bestimmten Elements zu extrahieren, kann der XPath-Ausdruck substring(//p/text(), 2, 5) verwendet werden .
Die CSS- und JavaScript-Gegenstücke:
document.querySelector('p').innerText.substring(2, 5)contains() kann verwendet werden, um zu prüfen, ob eine Zeichenkette eine bestimmte Teilzeichenkette enthält. Um beispielsweise zu prüfen, ob der Textinhalt eines bestimmten p-Elements das Wort "Winter" enthält, können wir den XPath-Ausdruck //p[contains(text(), "Winter")] verwenden .
Vorteile von CSS-Selektoren
CSS-Selektoren haben gegenüber XPath mehrere Vorteile, die sie zu einer guten Wahl für bestimmte Projekte machen. Einer der Hauptvorteile von CSS-Selektoren ist ihre Einfachheit und Lesbarkeit. Im Gegensatz zu XPath, das komplex und schwer zu lesen sein kann, sind CSS-Selektoren leicht zu verstehen und zu verwenden.
Ein weiterer Vorteil von CSS-Selektoren ist ihre Leistung. Da CSS-Selektoren nur nach unten im DOM-Baum navigieren, sind sie im Allgemeinen schneller als XPath, das im Baum nach oben und unten navigieren kann.
Schließlich sind CSS-Selektoren auch in der Webentwicklung weiter verbreitet. Das bedeutet, dass Webentwickler eher mit ihnen vertraut sind und eher bereit sind, Ihnen bei Ihren Projekten zu helfen.
Einpacken
Zusammenfassend lässt sich sagen, dass XPath und CSS-Selektoren beides leistungsstarke Werkzeuge sind, mit denen Sie in einem HTML-Dokument navigieren und Elemente extrahieren können. XPath ist leistungsfähig und flexibel, kann aber schwer zu lesen sein, während CSS-Selektoren leichter zu lesen sind, aber in ihrer Fähigkeit, durch das Dokument zu navigieren, eingeschränkt sind.
Bei der Wahl zwischen XPath- und CSS-Selektoren sollten Sie die Struktur des Dokuments und die Informationen, die Sie extrahieren möchten, berücksichtigen. Wenn Sie Daten auf der Grundlage der Position von Elementen extrahieren möchten, ist XPath die bessere Wahl. Wenn Sie jedoch Daten auf der Grundlage von Eigenschaften wie class oder id extrahieren möchten, sind CSS-Selektoren die bessere Wahl.
Wenn Sie daran interessiert sind, mehr darüber zu erfahren, wie Web Scraping Ihrem Unternehmen helfen kann, lade ich Sie ein, sich mit uns von WebScrapingAPI in Verbindung zu setzen. Wir sind mehr als glücklich, alle Ihre Fragen zu beantworten!
Nachrichten und Aktualisierungen
Bleiben Sie auf dem Laufenden mit den neuesten Web Scraping-Anleitungen und Nachrichten, indem Sie unseren Newsletter abonnieren.
We care about the protection of your data. Read our <l>Privacy Policy</l>.Privacy Policy.
Ähnliche Artikel
Erforschen Sie die transformative Kraft des Web Scraping im Finanzsektor. Von Produktdaten bis zur Stimmungsanalyse bietet dieser Leitfaden Einblicke in die verschiedenen Arten von Webdaten, die für Investitionsentscheidungen zur Verfügung stehen.
Eintauchen in die transformative Rolle von Finanzdaten bei der Entscheidungsfindung in Unternehmen. Verstehen Sie traditionelle Finanzdaten und die aufkommende Bedeutung alternativer Daten.
Erfahren Sie, wie Sie mit Hilfe von Datenparsing, HTML-Parsing-Bibliotheken und schema.org-Metadaten effizient Daten für Web-Scraping und Datenanalysen extrahieren und organisieren können.