CSS Selectors Cheat Sheet - Tipps und Tricks zum Scrapen des Webs
Ștefan Răcila am 15. Dezember 2022
Bevor Sie einen Web Scraper schreiben, müssen Sie verstehen, welche Daten Sie auslesen wollen und wie Sie auf diese Daten zugreifen können. Es gibt viele Möglichkeiten, auf Daten in einer Webseite zuzugreifen, die häufigste ist die Verwendung von CSS-Selektoren. Eine andere Alternative ist die Verwendung von XPath. Das XPath Cheat Sheet finden Sie hier.
Einführung in das DOM
Beim Parsen einer HTML-Datei erstellt der Browser in seinem Speicher eine Datendarstellung, die wie ein Baum aussieht. Diese Darstellung wird DOM (Document Object Model) genannt. Für jeden HTML-Tag gibt es im DOM einen Knoten, der mit ihm verknüpft ist. Ein Knoten hat Eigenschaften wie Name, Inhalt, Kindknoten, Stile, Ereignisse usw. Weitere Informationen darüber, wie das Browser-Rendering funktioniert, finden Sie in diesem Artikel Wie das Browser-Rendering funktioniert - hinter den Kulissen.
Wenn wir sagen, dass wir auf Daten einer Webseite zugreifen wollen, wollen wir nur durch das DOM zu einer bestimmten Gruppe von Knoten iterieren und den Inhalt darin extrahieren. In diesem Artikel werde ich Ihnen verschiedene Tipps geben, wie Sie mit CSS-Selektoren schnell auf diese Knoten zugreifen können.
Was sind CSS-Selektoren?
Warum heißen sie überhaupt CSS-Selektoren (Cascading Style Sheets)?
CSS wird verwendet, um das Aussehen von Knoten auf einer Seite zu definieren. Mit CSS können Sie Regeln für das Aussehen eines Knotens und seine Interaktion mit anderen Knoten erstellen. Eine Regel besteht aus einem Selektor und einer Liste von Stilen, die überschrieben werden sollen.
Diese Selektoren werden also mit CSS in Verbindung gebracht, weil dies ihre häufigste Verwendung ist, aber wir müssen sie nicht nur mit CSS verwenden. Mit CSS wollen Sie einen Knoten auswählen und seine Stileigenschaft ändern. Wenn Sie darüber nachdenken, wollen wir das Gleiche tun: einen Knoten auswählen und etwas mit ihm tun, z. B. seinen Inhalt lesen oder ein Ereignis auslösen.
Wie funktionieren CSS-Selektoren?
Es wird Ihnen sehr helfen, wenn Sie sich die Auswahl vorstellen. Nehmen wir an, Sie wollen alle Absätze von einer Website abrufen. Sie möchten alle Knoten, die den Namen "p" haben, erhalten. Das können Sie von Hand machen. Sie müssen nur jeden Knoten im DOM durchlaufen und nur die Knoten auswählen, die node.tagName === 'P' haben (Tag-Namen werden in Großbuchstaben geschrieben).
Hier ist ein kurzer Codeschnipsel, den Sie verwenden können:
function scrapeByTagName(node, tagName) {
if (node === null)
return;
node.childNodes.forEach(node => {
//console.log(node.tagName)
if (node.tagName?.toLowerCase() === tagName.toLowerCase()) {
console.log(node)
return
}
scrapeByTagName(node, tagName)
});
}Ich habe eine Dummy-Webseite erstellt, die wie folgt aussieht:
Und hier ist der HTML-Code dafür:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<div id="wrapper">
<h1 custom-attr="some data">Some Title</h1>
<h2 custom-attr="some other data">Some Subtitle</h2>
<div id="container">
<p custom-attr>paragraph
<span> subparagraph</span>
</p>
<p id="text">paragraph with id #text</p>
<p class="bold">paragraph with class .bold</p>
<p class="text">paragraph with class .text</p>
<p class="text bold">paragraph with class .text.bold</p>
<p class="text italic">paragraph with class .text.italic</p>
</div>
</div>
</body>
</html>
Nachdem ich die Funktion in der Browserkonsole ausgeführt hatte, erhielt ich diese Antwort:
Wie Sie sehen können, hat die Funktion alle p-Tags aufgezeichnet.
Um die Browserkonsole zu sehen, müssen Sie devTools öffnen und auf die Registerkarte Konsole gehen oder die Taste Escape. Sie können devTools öffnen, indem Sie mit der rechten Maustaste auf ein Element klicken und inspizieren aus dem Menü wählen oder die Tastenkombination Strg + Shift + i verwenden .
Wie benutzt man CSS-Selektoren?
Wir werden zwei Methoden verwenden: querySelector und querySelectorAll. Diese Methoden erscheinen bei jedem Objekt vom Typ Element. Die Knoten, die wir versuchen zu scrapen, haben den Typ HTMLElement, der vom Typ Element erbt.
AbfrageSelektor gibt den ersten Knoten zurück, der mit dem Selektor übereinstimmt. querySelectorAll gibt eine Liste mit allen Knoten zurück, die dem Selektor entsprechen. Um das zuvor gezeigte Beispiel zu wiederholen, müssen wir nur querySelectorAll aufrufen und durch die zurückgegebene Liste iterieren.
document.querySelectorAll('p').forEach(node => console.log(node))
Wie Sie sehen können, habe ich document.querySelectorAllverwendet habe, weil document im Fensterkontext als die Wurzel der Webseite definiert ist, d.h. als die Entsprechung des html-Tags. Sie können querySelector-Methoden mit jedem Knoten verwenden, nicht nur mit dem Wurzelknoten.
Um tatsächlich etwas zu scrapen, müssen Sie eine Bibliothek verwenden, die ein Browserfenster öffnen und eine URL aufrufen kann. Erst dann wird Ihr Code im Kontext dieses Fensters ausgeführt. Um mehr darüber zu erfahren, wie man das macht, empfehle ich diesen Artikel The Ultimate Guide to Web Scraping with JavaScript and Node.Js.
Hier bei WebScrapingAPI verwenden wir Puppeteer. Puppeteer ist eine Bibliothek, mit der wir Instanzen von Chromium-Browsern ohne Kopf steuern können. Sie können unsere API verwenden, um Daten aus einer Website zu extrahieren, ohne einen eigenen Scraper zu erstellen. Wir haben einen Parameter namens extract_rules, der CSS-Selektoren verwendet, um Daten aus einer bestimmten URL zu extrahieren.
Der CSS-Selektoren-Spickzettel
Der *-Selektor
Dieser Selektor gibt alle Elemente der Baumstruktur an. Er wird zwar nicht häufig verwendet, ist aber gut zu wissen.
Der Selektor .class
Sie können einen Knoten mit einer bestimmten Klasse erhalten, indem Sie .class verwenden. Dies wird meist verwendet, wenn Sie eine Liste von Elementen haben. Da die Elemente in einer Liste wahrscheinlich gleich aussehen, können sie die gleiche Klasse haben. Lassen Sie uns nach der Klasse .text suchen.
Vielleicht möchten Sie den Knoten auswählen, der die Klasse .bold hat.
Es sieht so aus, als gäbe es ein weiteres Element, das die Klasse .bold hat. Sie können mit dem Klassenselektor spezifischer sein, indem Sie mehrere verkettete Klassen verwenden.
Bitte beachten Sie, dass zwischen den Kursen keine Lücken bestehen.
document.querySelectorAll('.text .bold').forEach(node => console.log(node))Diese Abfrage gibt nichts aus dem obigen HTML zurück, da sie nach einem Element mit der Klasse .text sucht, das ein untergeordnetes Element mit der Klasse .bold hat (nicht unbedingt ein direktes untergeordnetes Element). Die Abfrage würde das untergeordnete Element zurückgeben, wenn es gefunden wird.
Der Selektor #id
Was ist, wenn ein Element keine Klasse hat oder wenn die Klasse zu häufig im Dokument verwendet wird? Sie können das ID-Attribut verwenden, um einen höheren Grad an Spezifität zu erreichen. Der Nachteil der Verwendung des id-Selektors ist, dass die id in den meisten Fällen in der HTML-Seite eindeutig ist, so dass Sie keine Liste von Knoten mit ihr erhalten können.
Der Knotennamen-Selektor
Jeder Knoten hat einen Namen. Das ist der genaue Name des gepaarten Tags im HTML. Sie können alle Knoten mit einem bestimmten Namen erhalten, indem Sie ihren Namen im Selektor verwenden.
Der [Attribut]-Selektor
Es kann vorkommen, dass Sie alle Knoten auswählen möchten, die ein bestimmtes Attribut aufweisen.
Sie können auch den Wert des Attributs angeben.
Oder auch, was der Attributwert enthalten soll. Sie können die Tilde ~ vor dem Gleichheitszeichen verwenden, um festzulegen, dass der Attributwert eine Liste von Wörtern enthalten soll.
Der Attributselektor wird am häufigsten verwendet, wenn Sie sich entscheiden, einen Scrapper zu erstellen. Er ist sehr mächtig und hat viel mehr Anwendungsfälle als das, was ich hier gezeigt habe. Weitere Informationen über die Verwendung des Attributselektors finden Sie hier W3 Attributselektoren.
Gruppierung mehrerer Selektoren
Ermittlung aller p-Knoten, die eine ID haben.
Wählen Sie alle Spannenknoten aus, die untergeordnet zu einem p-Knoten sind.
Ermittelt alle Div-Knoten, die direkte Kindknoten des Body-Knotens sind.
Alle p-Knoten mit der Klasse .text ermitteln
Die Möglichkeiten der Gruppierung dieser Selektoren sind endlos. Versuchen Sie, den HTML-Code von oben zu kopieren und weitere Knoten hinzuzufügen. Probieren Sie dann verschiedene Kombinationen von Selektoren aus. Wenn Sie mehr über CSS-Selektoren im Allgemeinen erfahren möchten, bietet Mozilla einen fantastischen Artikel, der erklärt , wie CSS-Selektoren für die Webentwicklung funktionieren.
Zusammenfassung
Wenn Sie etwas Neues lernen wollen, rate ich Ihnen, zuerst zu lernen, wie die Sache funktioniert. Ja, das ist ein optionaler Schritt, aber er wird dir einige Informationen geben, die andere nicht haben.
Im Bereich der Softwareentwicklung helfen Ihnen diese Informationen bei der Suche nach der richtigen Antwort auf Ihr Problem/Ihren Fehler. Sie können die Sache selbst in die Hand nehmen und sogar eine eigene Lösung entwickeln.
Wenn Sie CSS-Selektoren wirklich verstehen wollen, müssen Sie das DOM verstehen. Es ist einfach ein Baum (ein verbundener azyklischer ungerichteter Graph) mit Knoten, die einen Namen und einige Attribute haben. Das war's. Wenn Sie einen Selektor schreiben, schreiben Sie einfach einen String, der geparst und zur Abfrage des DOM verwendet wird.
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
Lernen Sie, wie Sie mit Scrapy und Splash dynamische JavaScript-gerenderte Websites scrapen können. Von der Installation über das Schreiben eines Spiders bis hin zum Umgang mit Seitenumbrüchen und der Verwaltung von Splash-Antworten bietet dieser umfassende Leitfaden Schritt-für-Schritt-Anleitungen für Anfänger und Experten gleichermaßen.
Sind XPath-Selektoren besser als CSS-Selektoren für Web Scraping? Erfahren Sie mehr über die Stärken und Grenzen der einzelnen Methoden und treffen Sie die richtige Wahl für Ihr Projekt!
Lernen Sie, wie man HTML-Tabellen mit Golang für eine leistungsstarke Datenextraktion scrapen kann. Erforschen Sie die Struktur von HTML-Tabellen und erstellen Sie einen Web-Scraper mit der Einfachheit, Gleichzeitigkeit und der robusten Standardbibliothek von Golang.
