XPath vs. CSS-Selektoren

XPath vs. CSS

Als Web-Scraping-Enthusiast sind Ihnen wahrscheinlich schon die Begriffe XPath und CSS-Selektoren begegnet. Dies sind zwei beliebte Methoden, um in einem HTML- oder XML-Dokument zu navigieren und Elemente zu extrahieren, aber was genau sind sie und wie unterscheiden sie sich? In diesem Artikel werde ich Ihnen einen direkten Vergleich zwischen XPath- und CSS-Selektoren präsentieren und deren Funktionen sowie Anwendungsfälle erläutern.

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 die Unterschiede in Syntax und Funktionen untersuchen und uns die verschiedenen integrierten Funktionen von XPath ansehen sowie wie man mit CSS und JavaScript die gleichen Ergebnisse erzielen kann. Außerdem werden wir die Vor- und Nachteile der einzelnen Methoden besprechen und wie Sie entscheiden können, welche Sie für Ihr Projekt verwenden sollten.

Also: Schnappen Sie sich ein Notizbuch, spitzen Sie Ihren Bleistift und machen Sie sich bereit, in die Welt der XPath- und CSS-Selektoren einzutauchen!

Übersicht über Selektoren

XPath, kurz für XML Path Language, ist eine Abfragesprache, die zur Navigation durch ein XML-Dokument verwendet wird. Sie wurde 1999 eingeführt, um einen Standard für den Zugriff auf Elemente innerhalb eines XML-Dokuments zu schaffen. Die Sprache basiert auf dem Konzept eines „Pfads“, der dazu dient, bestimmte Elemente anhand ihrer Position im Dokument auszuwählen.

Eines der Hauptmerkmale von XPath ist die Verwendung der Pfadnotation. Diese Notation ermöglicht es dir, Elemente anhand ihrer Position in der Dokumentenstruktur auszuwählen. In einem HTML-Dokument würde der Pfad „html/body/p“ beispielsweise alle p-Elemente auswählen, die direkte Unterelemente des body-Elements sind, welches wiederum ein direktes Unterelement des html-Elements ist.

Die Syntax von XPath ist recht einfach:

//tagname[@attribute='value']

Dabei ist „tagname“ der Typ des gesuchten HTML-Elements (z. B. div, a, p), „attribute“ ist eine Eigenschaft des gewünschten HTML-Elements, anhand derer unser Locator die Suche durchführt (z. B. class), und „value“ ist der spezifische Wert, nach dem Sie suchen

CSS-Selektoren, kurz für Cascading Style Sheets, werden verwendet, um Elemente anhand ihrer Eigenschaften wie class, id und Attribute auszuwählen. Sie sind leichter zu lesen und zu verstehen als XPath, sind jedoch in ihrer Fähigkeit, durch das Dokument zu navigieren, eingeschränkt. CSS-Selektoren werden meist für Styling und 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.innerText

XPath hingegen wurde speziell als Abfragesprache für XML-Dokumente entwickelt und verfügt über eine Vielzahl integrierter Funktionen. Diese Funktionen können verwendet werden, um Berechnungen durchzuführen und bestimmte Informationen aus den Elementen zu extrahieren. Mit der text()-Funktion von XPath können Sie beispielsweise den Textwert eines Elements direkt auswählen:

<html> <body> <p>Hello, world!</p> </body> </html>

Um den Text „Hello, world!“ mithilfe der Funktion text() in XPath auszuwählen, lautet der Ausdruck:

/html/body/p/text()

Weitere 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. Dieser erste Artikel behandelt die Grundlagen von XPath-Selektoren, einschließlich der Syntax, der Funktionen und der Navigation im DOM-Baum. Dieser zweite Artikel befasst sich mit den Grundlagen von CSS-Selektoren, einschließlich der verschiedenen Arten von Selektoren.

Ein Beispiel einrichten

Um die wichtigsten Unterschiede zwischen XPath- und CSS-Selektoren anschaulich zu veranschaulichen, analysieren wir eine fiktive HTML-Struktur:

<!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 Entwicklertools

Das Testen von XPath- und CSS-Selektoren in den Entwicklertools ist eine schnelle und einfache Möglichkeit, um zu überprüfen, ob Ihre Selektoren korrekt funktionieren. Der Vorgang ist in den meisten modernen Browsern ähnlich, aber für dieses Beispiel verwenden wir Google Chrome.

Öffnen Sie zunächst die Webseite, auf der Sie Ihre Selektoren testen möchten, in Google Chrome. Klicken Sie anschließend mit der rechten Maustaste auf ein Element, das Sie auswählen möchten, und wählen Sie im Kontextmenü „Untersuchen“ aus. Dadurch wird das Fenster der Entwicklertools geöffnet:

Im Fenster der Entwicklertools sehen Sie auf der linken Seite den HTML-Quellcode der Webseite und auf der rechten Seite die entsprechend gerenderte Webseite.

Um den vollständigen XPath und den CSS-Selektor eines Elements zu finden, klicken Sie mit der rechten Maustaste auf das Element im HTML-Code 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 Ihre 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 beispielsweise alle h2-Tags aus dem oben angegebenen HTML-Beispiel auswählen möchten, geben Sie „//h2“ in die Suchleiste ein und drücken die Eingabetaste.

Die wichtigsten Erkenntnisse

Einer der Hauptunterschiede zwischen XPath und CSS besteht darin, dass XPath Elemente anhand ihrer Position im Dokument auswählen kann. CSS-Selektoren sind darauf beschränkt, Elemente anhand ihrer Eigenschaften auszuwählen.

In XPath können wir beispielsweise das zweite div-Element mit der Klasse „news-story“ auswählen, indem wir den Ausdruck //div[@class='news-story'][2] verwenden. 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 kein 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 konkreten Beispiel wählt div[@class='news-story'][2] den zweiten Artikel 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 bei der Navigation im DOM-Baum. Dazu gehört die Möglichkeit, sich im Baum nach oben und unten zu bewegen. CSS-Selektoren erlauben nur die Navigation nach unten. Dies macht XPath leistungsfähiger und vielseitiger, aber auch komplexer.

Mit XPath können Sie Achsen wie die Eltern- und Vorfahrenachse verwenden, um auf das Eltern- oder Vorfahrenelement eines Elements zuzugreifen, was mit CSS-Selektoren nicht möglich ist.

Beispielsweise wählt der XPath-Ausdruck //div[@class='news-story'][1]/parent::*//h2 das erste div-Element mit der Klasse „news-story“ aus. Anschließend navigiert er mithilfe des Operators parent::* zu dessen übergeordnetem Element und wählt dann das h2-Element innerhalb dieses übergeordneten Elements aus.

Alternativ kannst du 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 auszuwählen.

Integrierte Funktionen

Ein weiterer wichtiger Unterschied zwischen XPath und CSS-Selektoren besteht darin, dass XPath über eine Vielzahl integrierter Funktionen verfügt, wie 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 beispielsweise die Anzahl der div-Elemente mit der Klasse news-story zu zählen, können wir den XPath-Ausdruck count(//div[@class='news-story']) verwenden.

Das CSS- und JavaScript-Äquivalent wäre:

document.querySelectorAll('div.news-story').length

sum() kann verwendet werden, um die Summe eines bestimmten Werts für eine Gruppe von Elementen zu berechnen, die bestimmten Kriterien entsprechen. Um beispielsweise die Gesamtzahl der Zeichen im Textinhalt aller p-Elemente zu berechnen, können wir den XPath-Ausdruck sum(//p/text()/string-length()) verwenden.

Die entsprechenden CSS- und JavaScript-Befehle lauten:

var sum = 0;

var elements = document.querySelectorAll('p');

elements.forEach(function(element) {

  sum += element.innerText.length;

});

console.log(sum);

substring() kann verwendet werden, um eine Teilzeichenfolge aus einer Zeichenfolge zu extrahieren. Um beispielsweise das zweite bis fünfte Zeichen des Textinhalts eines bestimmten Elements zu extrahieren, können wir den XPath-Ausdruck substring(//p/text(), 2, 5) verwenden.

Die entsprechenden CSS- und JavaScript-Befehle:

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 für bestimmte Projekte zu einer hervorragenden Wahl machen. Einer der Hauptvorteile von CSS-Selektoren ist ihre Einfachheit und Lesbarkeit. Im Gegensatz zu XPath, das komplex und schwer lesbar sein kann, sind CSS-Selektoren leicht zu verstehen und zu verwenden.

Ein weiterer Vorteil von CSS-Selektoren ist ihre Leistung. Da CSS-Selektoren nur den DOM-Baum nach unten durchlaufen, sind sie in der Regel schneller als XPath, das den Baum sowohl nach oben als auch nach unten durchlaufen kann.

Schließlich sind CSS-Selektoren in der Webentwicklung auch weiter verbreitet. Das bedeutet, dass Webentwickler eher mit ihnen vertraut sind und Ihnen möglicherweise eher bei Ihren Projekten helfen.

Zusammenfassung

Zusammenfassend lässt sich sagen, dass sowohl XPath als auch CSS-Selektoren leistungsstarke Werkzeuge sind, mit denen Sie in einem HTML-Dokument navigieren und Elemente extrahieren können. XPath ist leistungsstark und flexibel, kann jedoch schwer lesbar sein, während CSS-Selektoren leichter zu lesen sind, aber in ihrer Fähigkeit, durch das Dokument zu navigieren, eingeschränkt sind.

Berücksichtigen Sie bei der Wahl zwischen XPath und CSS-Selektoren die Struktur des Dokuments und die Informationen, die Sie extrahieren möchten. Wenn Sie Daten anhand der Position von Elementen extrahieren möchten, ist XPath die bessere Wahl. Wenn Sie jedoch Daten anhand von Eigenschaften wie Klasse oder ID extrahieren möchten, sind CSS-Selektoren die bessere Option.

Wenn Sie mehr darüber erfahren möchten, wie Web Scraping Ihrem Unternehmen helfen kann, laden wir Sie ein, sich an uns bei WebScrapingAPI zu wenden. Wir beantworten gerne alle Ihre Fragen!