Bevor du einen Web-Scraper schreibst, musst du verstehen, welche Daten du auslesen möchtest und wie du auf diese Daten zugreifen kannst. Es gibt viele Möglichkeiten, auf Daten einer Webseite zuzugreifen; die gängigste ist die Verwendung von CSS-Selektoren. Eine weitere Alternative ist die Verwendung von XPath. Das XPath-Spickzettel findest du 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 als DOM (Document Object Model) bezeichnet. Für jeden HTML-Tag gibt es im DOM einen zugehörigen Knoten. Ein Knoten verfügt über Eigenschaften wie Name, Inhalt, untergeordnete Knoten, Stile, Ereignisse usw. Weitere Informationen darüber, wie das Rendering im Browser funktioniert, findest du in diesem Artikel: Wie das Rendering im Browser funktioniert – hinter den Kulissen.
Wenn wir sagen, dass wir auf Daten einer Webseite zugreifen wollen, meinen wir damit, dass wir das DOM nach einer bestimmten Gruppe von Knoten durchsuchen und deren Inhalt extrahieren wollen. In diesem Artikel gebe ich dir verschiedene Tipps, wie du mit CSS-Selektoren schnell auf diese Knoten zugreifen kannst.
Was sind CSS-Selektoren?
Warum heißen sie überhaupt CSS-Selektoren (Cascading Style Sheets)?
CSS wird verwendet, um das Erscheinungsbild von Knoten auf einer Seite zu definieren. Mit CSS können Sie Regeln festlegen, wie ein Knoten aussehen soll und wie er mit anderen Knoten interagieren soll. Eine Regel besteht aus einem Selektor und einer Liste von Stilen, die überschrieben werden sollen.
Diese Selektoren werden also mit CSS in Verbindung gebracht, da dies ihre häufigste Verwendung ist, aber wir müssen sie nicht nur mit CSS verwenden. Mit CSS möchten Sie einen Knoten auswählen und dessen Stileigenschaft ändern. Wenn man darüber nachdenkt, wollen wir dasselbe tun: einen Knoten auswählen und etwas damit machen, wie beispielsweise seinen Inhalt lesen oder ein Ereignis auslösen.
Wie funktionieren CSS-Selektoren?
Es hilft dir sehr, wenn du dir die Auswahl vorstellst. Nehmen wir an, du möchtest alle Absätze von einer Website scrapen. Du möchtest alle Knoten abrufen, die den Namen `p` haben. Das kannst du manuell tun. Du musst lediglich jeden Knoten im DOM durchlaufen und nur die Knoten auswählen, bei denen node.tagName === 'P' gilt (Tag-Namen werden großgeschrieben).
Hier ist ein kurzer Codeausschnitt, den du verwenden kannst:
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 Beispiel-Webseite erstellt, die so 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 Browser-Konsole ausgeführt habe, erhielt ich folgende Antwort:
Wie du sehen kannst, hat die Funktion alle p-Tags protokolliert.
Um die Browserkonsole anzuzeigen, müssen Sie DevTools öffnen und zum Reiter „Konsole“ wechseln oder die Escape-Taste drücken. Sie können DevTools öffnen, indem Sie mit der rechten Maustaste auf ein Element klicken und im Menü „Untersuchen“ auswählen oder die Tastenkombination Strg + Umschalt + I verwenden.
Wie verwendet man CSS-Selektoren?
Wir werden zwei Methoden verwenden: `querySelector` und `querySelectorAll`. Diese Methoden sind bei jedem Objekt vom Typ `Element` verfügbar. Die Knoten, die wir scrapen möchten, haben den Typ `HTMLElement`, der vom Typ `Element` abgeleitet ist.
querySelector gibt den ersten Knoten zurück, der dem Selektor entspricht. querySelectorAll gibt eine Liste mit allen Knoten zurück, die dem Selektor entsprechen. Um das zuvor gezeigte Beispiel nachzubilden, müssen wir lediglich querySelectorAll aufrufen und die zurückgegebene Liste durchlaufen.
document.querySelectorAll('p').forEach(node => console.log(node))
Sie sehen, dass ich document.querySelectorAll verwendet habe. Das liegt daran, dass document im Fensterkontext als Stamm der Webseite definiert ist, also als Entsprechung des HTML-Tags. Sie können querySelector-Methoden bei jedem Knoten verwenden, nicht nur beim Stammknoten.
Um tatsächlich Daten 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, 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 headless Chromium-Browsern steuern können. Du kannst unsere API nutzen, um Daten von einer Website zu extrahieren, ohne einen eigenen Scraper erstellen zu müssen. Wir haben tatsächlich einen Parameter namens „extract_rules“, der CSS-Selektoren verwendet, um Daten von einer bestimmten URL zu extrahieren.
Das CSS-Selektoren-Spickzettel
Der *-Selektor
Dieser Selektor gibt alle Elemente aus dem Baum an. Er wird nicht oft verwendet, ist aber gut zu wissen.
Der .class-Selektor
Mit .class können Sie einen Knoten mit einer bestimmten Klasse abrufen. Dies wird meist verwendet, wenn Sie eine Liste von Elementen haben. Da die Elemente in einer Liste wahrscheinlich gleich aussehen, haben sie möglicherweise dieselbe Klasse. Suchen wir nach der Klasse .text.
Vielleicht möchtest du den Knoten auswählen, der die Klasse .bold hat.
Es sieht so aus, als gäbe es noch ein weiteres Element mit der Klasse .bold. Mit dem Klassenselektor kannst du genauer vorgehen, indem du mehrere Klassen aneinander reihst.
Bitte beachten Sie, dass zwischen den Klassen keine Leerzeichen stehen dürfen.
document.querySelectorAll('.text .bold').forEach(node => console.log(node))
Diese Abfrage liefert keine Ergebnisse aus dem obigen HTML-Code, 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, falls es gefunden wird.
Der #id-Selektor
Was ist, wenn ein Element keine Klasse hat oder wenn die Klasse im Dokument zu häufig verwendet wird? Du kannst das ID-Attribut verwenden, um eine höhere Spezifität zu erreichen. Der Nachteil der Verwendung des ID-Selektors ist, dass die ID in den meisten Fällen auf der HTML-Seite eindeutig ist, sodass du damit keine Liste von Knoten erhalten kannst.
Der Knotennamensselektor
Jeder Knoten hat einen Namen. Es handelt sich um den genauen Namen des entsprechenden Tags im HTML-Code. Du kannst alle Knoten abrufen, die einen bestimmten Namen haben, indem du diesen Namen im Selektor verwendest.
Der [Attribut]-Selektor
Es kann vorkommen, dass Sie alle Knoten auswählen möchten, die ein bestimmtes Attribut aufweisen.
Sie können auch den Attributwert angeben.
Oder sogar, was der Attributwert enthalten soll. Du kannst das Tilde-Zeichen ~ vor dem Gleichheitszeichen verwenden, um festzulegen, dass der Attributwert eine Liste von Wörtern enthalten soll.
Der Attribut-Selektor wird am häufigsten verwendet, wenn du dich entscheidest, einen Scraper zu erstellen. Er ist sehr leistungsstark und hat viel mehr Anwendungsfälle als die, die ich hier gezeigt habe. Weitere Informationen zur Verwendung des Attribut-Selektors findest du hier: W3-Attribut-Selektoren.
Gruppierung mehrerer Selektoren
Alle p-Knoten abrufen, die eine ID haben.
Alle span-Knoten auswählen, die Kinder eines p-Knotens sind.
Alle div-Knoten abrufen, die direkte Kinder des body-Knotens sind.
Alle p-Knoten abrufen, die die Klasse .text haben
Die Möglichkeiten, diese Selektoren zu gruppieren, 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 an, der erklärt, wie CSS-Selektoren in der Webentwicklung funktionieren.
Zusammenfassung
Wenn du etwas Neues lernen möchtest, rate ich dir, zuerst zu verstehen, wie diese Sache funktioniert. Ja, das ist ein optionaler Schritt, aber er verschafft dir Informationen, über die andere nicht verfügen.
Im Bereich der Softwareentwicklung helfen dir diese Informationen dabei, die richtige Antwort auf dein Problem oder deinen Fehler zu finden. Du könntest die Sache selbst in die Hand nehmen und sogar eine eigene Lösung entwickeln.
Wenn du CSS-Selektoren wirklich verstehen willst, musst du das DOM verstehen. Es ist einfach ein Baum (ein verbundener azyklischer, ungerichteter Graph) mit Knoten, die einen Namen und einige Attribute haben. Das ist alles. Wenn du einen Selektor schreibst, schreibst du einfach eine Zeichenkette, die geparst und zur Abfrage des DOMs verwendet wird.
