Web Scraping mit JavaScript: Node.js-Leitfaden

Dieser Leitfaden erklärt, wie Sie mit JavaScript und Neinde.js Web Scraping betreiben, der Laufzeitumgebung, zu der die meisten Entwickler greifen, wenn sie öffentliche Daten im großen Maßstab sammeln möchten. Wer Web Scraping mit JavaScript lernen will, muss für jede Seite das passende Werkzeug wählen: einen schlanken HTTP-Client für statisches HTML oder einen Headless-Browser für Inhalte, die per Skript geladen werden.

Im Folgenden finden Sie funktionierenden, ausführbaren Neinde.js-Code für beide Fälle sowie die Projekteinrichtung, strukturierte Exporte nach JSON und CSV, Paginierung, Wiederholungsversuche mit Backoff, Ratenbegrenzung, Proxy-Authentifizierung, XHR-Abfangen und die ethischen Fragen sowie Sperrmechanismen, die darüber entscheiden, ob ein Scraper langfristig funktioniert.

DataImpulse ist ein ethischer Proxy-Anbieter mit mehr als 90 Millionen privaten, mobilen und Datacenter-IP-Adressen in 195 Ländern. Das Unternehmen nutzt ein Pay-as-you-go-Modell ab 1 Dollar pro GB mit nicht ablaufendem Traffic und wird für Web Scraping, Anzeigenverifizierung, Preisüberwachung, Marktforschung und die Verwaltung mehrerer Konten eingesetzt.

Was ist Web Scraping mit JavaScript?

Web Scraping mit JavaScript ist das programmatische Abrufen von Webseiten und Extrahieren strukturierter Daten mit JavaScript, das gewöhnlich in der Neinde.js-Laufzeitumgebung statt in einem Browser-Tab ausgeführt wird.

JavaScript eignet sich dafür besonders gut, weil die Sprache bereits das Document Object Model abbildet und sich das Auswählen von Elementen für Frontend-Entwickler vertraut anfühlt. In der Praxis erledigt ein Scraper drei Dinge: Er ruft eine Seite über HTTP ab, parst das zurückgelieferte Markup in einen durchsuchbaren Baum und liest die benötigten Felder wie Titel, Preise oder Links aus. Die Komplexität ergibt sich daraus, wie die Zielseite ihre Daten bereitstellt. Deshalb ist die Wahl des richtigen Werkzeugs wichtiger als das Parsen selbst. Statische Seiten liefern ihre Daten bereits in der ersten HTML-Antwort, dynamische Seiten setzen sie erst nach dem Laden im Browser zusammen. Für beide Fälle werden unterschiedliche Toolchains benötigt.

Wie richten Sie ein Neinde.js-Scraping-Projekt ein?

Erstellen Sie einen Projektordner, initialisieren Sie ihn mit npm und installieren Sie die benötigten Bibliotheken, bevor Sie Scraping-Code schreiben.

Neinde.js 18 und spätere Versionen enthalten ein globales fetch, daher benötigen Sie für einfache GET-Anfragen keine HTTP-Bibliothek. Viele Teams bevorzugen dennoch axios wegen seiner Interceptors und Proxy-Verwaltung. Die folgenden Befehle legen ein Projekt an und installieren cheerio zum Parsen, axios als alternativen Client, p-limit zur Steuerung der Parallelität sowie Puppeteer und Playwright für dynamische Seiten:

mkdir js-scraper && cd js-scraper
npm init -y
npm install cheerio axios p-limit
npm install puppeteer playwright

# enable modern import syntax
npm pkg set type=module

Mit type=module können Sie import-Anweisungen verwenden. Wenn Sie CommonJS bevorzugen, behalten Sie die Standardeinstellung bei und nutzen stattdessen require. Die Beispiele in diesem Leitfaden verwenden die import-Syntax, lassen sich aber jeweils direkt in einen require-Aufruf übertragen. Nach Abschluss der Installation steht Ihnen in einem einzigen Projekt alles für statisches und dynamisches Scraping zur Verfügung.

Wie scrapen Sie eine statische Seite mit fetch und cheerio?

Laden Sie bei statischen Seiten das HTML mit der integrierten fetch-Funktion herunter und parsen Sie es mit cheerio, das Ihnen serverseitig eine API im jQuery-Stil bietet.

Statische Seiten geben ihre Inhalte direkt in der ersten HTML-Antwort zurück, daher ist kein Browser-Rendering erforderlich. Dieser Ansatz ist schnell und kostengünstig, weil Sie nur Markup herunterladen, nicht Bilder, Schriftarten oder Skripte. Das folgende Beispiel ruft eine Seite ab, lädt sie in cheerio und liest jede Produktkarte aus:

import * as cheerio from 'cheerio';

async function scrape(url) {
  const res = await fetch(url, {
    headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' }
  });
  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
  const html = await res.text();
  const $ = cheerio.load(html);

  const items = [];
  $('.product').each((i, el) => {
    items.push({
      title: $(el).find('h2').text().trim(),
      price: $(el).find('.price').text().trim(),
      link: $(el).find('a').attr('href')
    });
  });
  return items;
}

console.log(await scrape('https://example.com/catalog'));

Wenn Sie axios bevorzugen, bleibt der Parsing-Teil identisch, lediglich die Anfrage ändert sich. Axios löst bei Statuscodes außerhalb von 2xx automatisch einen Fehler aus und vereinfacht die Proxy-Konfiguration, weshalb es viele produktive Scraper verwenden:

import axios from 'axios';
import * as cheerio from 'cheerio';

const { data: html } = await axios.get('https://example.com/catalog', {
  headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' },
  timeout: 15000
});
const $ = cheerio.load(html);
const titles = $('.product h2').map((i, el) => $(el).text().trim()).get();
console.log(titles);

Bevor Sie einen Scraper auf eine Website ansetzen, sollten Sie prüfen, ob die Zielseite dies erlaubt. Unser Leitfaden zum Prüfen, ob eine Website Scraping erlaubt erläutert robots.txt und die Nutzungsbedingungen.

Wie extrahieren Sie strukturierte Daten nach JSON und CSV?

Sammeln Sie jeden Datensatz in einem Array einfacher Objekte und schreiben Sie dieses Array anschließend in eine JSON-Datei oder wandeln Sie es für eine CSV-Datei in kommagetrennte Zeilen um.

Rohdaten aus dem Scraping sind erst nützlich, wenn sie in einer vorhersehbaren Struktur gespeichert werden. JSON ist das einfachste Zielformat, da sich ein JavaScript-Array direkt serialisieren lässt. Der folgende Ausschnitt schreibt die gescrapten Elemente mit dem integrierten Dateisystemmodul auf den Datenträger:

import { writeFile } from 'node:fs/promises';

const items = await scrape('https://example.com/catalog');
await writeFile('products.json', JSON.stringify(items, null, 2), 'utf-8');
console.log(`Saved ${items.length} records to products.json`);

CSV eignet sich besser, wenn die Daten in eine Tabellenkalkulation oder ein Data Warehouse fließen. Sie können die Datei ohne Bibliothek erzeugen, indem Sie Anführungszeichen escapen und Felder zusammenfügen. Das Escapen ist wichtig, weil Preise und Titel Kommas enthalten können:

import { writeFile } from 'node:fs/promises';

function toCsv(rows) {
  const headers = Object.keys(rows[0]);
  const escape = (v) => `"${String(v ?? '').replace(/"/g, '""')}"`;
  const lines = [headers.join(',')];
  for (const row of rows) {
    lines.push(headers.map((h) => escape(row[h])).join(','));
  }
  return lines.join('\n');
}

const items = await scrape('https://example.com/catalog');
await writeFile('products.csv', toCsv(items), 'utf-8');

Halten Sie Feldnamen über mehrere Durchläufe hinweg stabil, damit nachgelagerte Tools nicht ausfallen, wenn sich ein Seitenlayout leicht ändert. Wenn Sie außerdem binäre Assets abrufen müssen, lesen Sie unseren Leitfaden zum Scrapen von Bildern von einer Website.

Wie scrapen Sie mehrere Seiten mit Paginierung?

Durchlaufen Sie die Seiten-URLs der Website oder folgen Sie auf jeder Seite dem Link zur nächsten Seite. Scrapen Sie jede Seite und stoppen Sie, wenn keine weiteren Ergebnisse vorhanden sind.

Die meisten Kataloge verteilen Ergebnisse mithilfe eines Abfrageparameters wie ?page=2 auf nummerierte Seiten oder stellen einen Weiter-Link bereit. Das sicherste Muster liest jede Seite, sammelt ihre Datensätze, sucht dann nach der nächsten Seite und stoppt, wenn diese fehlt. Das folgende Beispiel durchläuft nummerierte Seiten, bis eine Seite keine Elemente zurückgibt:

import * as cheerio from 'cheerio';

async function scrapeAll(base) {
  const all = [];
  for (let page = 1; page <= 50; page++) {
    const res = await fetch(`${base}?page=${page}`, {
      headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' }
    });
    if (!res.ok) break;
    const $ = cheerio.load(await res.text());
    const items = $('.product').map((i, el) => ({
      title: $(el).find('h2').text().trim(),
      price: $(el).find('.price').text().trim()
    })).get();

    if (items.length === 0) break;
    all.push(...items);
    await new Promise((r) => setTimeout(r, 1000));
  }
  return all;
}

console.log((await scrapeAll('https://example.com/catalog')).length);

Beachten Sie die Pause von einer Sekunde zwischen den Seiten und die feste Obergrenze von 50 Durchläufen. Dadurch wird eine außer Kontrolle geratene Schleife verhindert, falls die Website nie eine leere Seite zurückgibt. Werden Inhalte durch Scrollen statt über nummerierte Seiten geladen, benötigen Sie einen Headless-Browser, wie im folgenden Puppeteer-Abschnitt beschrieben.

Wie gehen Sie mit Wiederholungsversuchen, Backoff und Ratenbegrenzung um?

Verpacken Sie jede Anfrage in eine Wiederholungsfunktion, die nach jedem Fehlschlag länger wartet, und begrenzen Sie die Anzahl gleichzeitiger Anfragen, damit Sie innerhalb der Belastungsgrenze einer Website bleiben.

Netzwerke sind unzuverlässig und Server liefern vorübergehende Fehler. Ein Scraper, der beim ersten Fehlschlag aufgibt, verliert daher unnötig Daten. Eine Wiederholungsfunktion mit exponentiellem Backoff wartet zwischen den Versuchen zunehmend länger und gibt einem rate-limitierten Server damit Zeit zur Erholung:

async function fetchWithRetry(fn, retries = 4, delay = 1000) {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      return await fn();
    } catch (err) {
      if (attempt === retries) throw err;
      const wait = delay * 2 ** (attempt - 1);
      console.warn(`Attempt ${attempt} failed, retrying in ${wait}ms`);
      await new Promise((r) => setTimeout(r, wait));
    }
  }
}

const html = await fetchWithRetry(async () => {
  const res = await fetch('https://example.com/catalog');
  if (res.status === 429) throw new Error('Rate limited');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.text();
});

Backoff behandelt einzelne Anfragen, aber Sie müssen auch steuern, wie viele parallel laufen. Hunderte gleichzeitige Anfragen belasten den Zielserver und führen dazu, dass Ihr Traffic auffällt. Die Bibliothek p-limit begrenzt die Parallelität, sodass eine feste Anzahl von Workern eine Warteschlange von URLs verarbeitet:

import pLimit from 'p-limit';

const limit = pLimit(5); // at most 5 requests in flight
const urls = Array.from({ length: 100 }, (_, i) =>
  `https://example.com/item/${i + 1}`
);

const results = await Promise.all(
  urls.map((url) =>
    limit(() => fetchWithRetry(async () => {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.text();
    }))
  )
);

console.log(`Fetched ${results.length} pages with a cap of 5 in parallel`);

Zusammen halten Backoff und eine Parallelitätsbegrenzung Ihre Belastung in einem angemessenen Rahmen und Ihre Erfolgsquote hoch. Eine umfassendere Checkliste finden Sie in unserem Leitfaden zu Best Practices für Web Scraping-Leitfaden.

Wie scrapen Sie dynamische Seiten mit Puppeteer?

Bei dynamischen Seiten, die Inhalte nach dem Laden mit JavaScript aufbauen, steuern Sie Headless Chrome mit Puppeteer, warten auf den Zielselektor und lesen das vollständig gerenderte DOM aus.

Viele moderne Websites liefern zunächst eine nahezu leere HTML-Hülle und rufen Daten anschließend über Hintergrundanfragen ab. Ein HTTP-Client sieht dann nichts Brauchbares, daher benötigen Sie eine Engine, die das JavaScript der Seite selbst ausführt. Puppeteer steuert Headless Chrome und kann auf Elemente warten, klicken und scrollen. Das folgende Beispiel wartet auf einen Selektor und scrollt dann wiederholt, um das Laden per Infinite Scroll auszulösen, bevor es die Daten im Browser-Kontext extrahiert:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (compatible; MyScraper/1.0)');
await page.goto('https://example.com/feed', { waitUntil: 'networkidle2' });

// wait until the first batch of cards is present
await page.waitForSelector('.product');

// infinite scroll: scroll to the bottom until height stops growing
let previousHeight = 0;
for (let i = 0; i < 20; i++) {
  const height = await page.evaluate('document.body.scrollHeight');
  if (height === previousHeight) break;
  previousHeight = height;
  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  await new Promise((r) => setTimeout(r, 1500));
}

const items = await page.evaluate(() =>
  Array.from(document.querySelectorAll('.product')).map((el) => ({
    title: el.querySelector('h2')?.innerText.trim(),
    price: el.querySelector('.price')?.innerText.trim()
  }))
);

console.log(`Extracted ${items.length} items`);
await browser.close();

Die Schleife endet, sobald die Seitenhöhe nicht mehr zunimmt, was signalisiert, dass keine neuen Inhalte geladen werden. Die feste Obergrenze von 20 Scrollvorgängen verhindert eine Endlosschleife. Mehr zu dieser Art von Zielseite finden Sie in unserem Leitfaden zum Scrapen dynamischer Webseiten.

Wie verwenden Sie Playwright als Alternative zu Puppeteer?

Playwright funktioniert fast identisch wie Puppeteer, bietet jedoch erstklassige Unterstützung für Chromium, Firefox und WebKit sowie automatisch wartende Locators, die fehleranfällige Selektoren reduzieren.

Playwright wurde von einigen der ursprünglichen Puppeteer-Entwickler erstellt und teilt den größten Teil seiner API. Eine Migration beschränkt sich daher meist auf das Umbenennen einiger Aufrufe. Seine Locators warten automatisch, bis Elemente ausführbar sind, wodurch viele manuelle waitForSelector-Aufrufe entfallen. Der entsprechende Scraper sieht so aus:

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  userAgent: 'Mozilla/5.0 (compatible; MyScraper/1.0)'
});
const page = await context.newPage();
await page.goto('https://example.com/feed', { waitUntil: 'networkidle' });

await page.locator('.product').first().waitFor();

const items = await page.locator('.product').evaluateAll((els) =>
  els.map((el) => ({
    title: el.querySelector('h2')?.innerText.trim(),
    price: el.querySelector('.price')?.innerText.trim()
  }))
);

console.log(`Extracted ${items.length} items`);
await browser.close();

Wählen Sie Playwright, wenn Sie denselben Scraper in mehreren Browser-Engines testen müssen oder das integrierte Network Mocking nutzen möchten. Wählen Sie Puppeteer, wenn Sie nur Chrome ansprechen und die kleinere Abhängigkeit wünschen. Beide verbrauchen deutlich mehr Speicher als fetch und cheerio. Setzen Sie sie daher nur für Seiten ein, die wirklich Rendering benötigen.

Welches JavaScript-Scraping-Tool sollten Sie wählen?

Verwenden Sie fetch oder axios mit cheerio für statisches HTML und greifen Sie nur dann zu Puppeteer oder Playwright, wenn eine Seite ihre Daten im Browser rendert.

Das richtige Werkzeug hängt davon ab, wie die Seite Daten bereitstellt und wie wichtig Ihnen Geschwindigkeit gegenüber originalgetreuem Rendering ist. HTTP-Clients sind schnell und schlank, können aber kein JavaScript ausführen. Headless-Browser führen alles aus, was ein echter Nutzer sieht, benötigen jedoch mehr Speicher und Zeit. Die folgende Tabelle fasst die Unterschiede zusammen:

Ein gängiges Muster im Produktiveinsatz kombiniert beide Ansätze: Verwenden Sie einen Headless-Browser nur für Seiten oder Endpunkte, die Rendering benötigen, und greifen Sie für den Großteil der Anfragen auf einen einfachen HTTP-Client zurück. JavaScript ist einer von mehreren geeigneten Stacks für diese Aufgabe. Wenn Sie Ökosysteme vergleichen, behandelt unser Leitfaden zu Web Scraping mit Rust eine kompilierte Alternative.

Wie leiten Sie JavaScript-Scraper über einen Proxy?

Übergeben Sie die Proxy-Einstellungen an Ihren HTTP-Client oder die Startoptionen des Browsers, damit Anfragen über eine andere IP-Adresse ausgehen. Das verteilt die Last und verringert die Wahrscheinlichkeit, dass eine einzelne Adresse rate-limitiert wird.

Viele Seiten von einer IP zu scrapen ist der schnellste Weg, gesperrt zu werden. Wenn Anfragen über einen Pool von Adressen rotieren, wirkt der Traffic wie der vieler einzelner Besucher. Mit axios geben Sie Proxy-Host, Port und Zugangsdaten in der Anfragekonfiguration an. Das folgende Beispiel leitet über ein DataImpulse-Gateway:

import axios from 'axios';

const { data } = await axios.get('https://example.com', {
  proxy: {
    protocol: 'http',
    host: 'gw.dataimpulse.com',
    port: 823,
    auth: { username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }
  },
  headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' }
});
console.log(data.length, 'bytes received through the proxy');

Puppeteer übernimmt den Proxy als Startargument und authentifiziert sich anschließend auf der Seite, weil Chrome keine Zugangsdaten innerhalb der Proxy-URL akzeptiert. Das Muster ist bei Playwright gleich, das ein Proxy-Objekt mit Benutzername und Passwort direkt akzeptiert:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  args: ['--proxy-server=gw.dataimpulse.com:823']
});
const page = await browser.newPage();
await page.authenticate({
  username: 'YOUR_USERNAME',
  password: 'YOUR_PASSWORD'
});
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
console.log(await page.title());
await browser.close();

DataImpulse bietet Residential-Proxys, Datacenter-Proxys und Mobile Proxys über HTTP, HTTPS und SOCKS5, mit rotierenden und Sticky Sessions. Länder-Targeting ist enthalten, während Targeting nach Bundesstaat, Stadt, ZIP und ASN kostenpflichtige Zusatzoptionen sind. Falls eine Proxy-Anfrage einen Authentifizierungsfehler zurückgibt, erklärt unser Hinweis zu HTTP-Fehler 407 die häufigste Ursache. Unser Leitfaden zur Proxy-Authentifizierung erläutert Zugangsdatenformate ausführlicher.

Wie fangen Sie XHR- und JSON-Endpunkte ab?

Statt das gerenderte HTML zu scrapen, beobachten Sie den Netzwerkverkehr in einem Headless-Browser und lesen die JSON-Antworten, die die Seite im Hintergrund abruft. Das ist oft sauberer und schneller.

Dynamische Seiten beziehen ihre Daten meist von einer verborgenen API, die JSON zurückgibt. Wenn Sie diese Antwort direkt lesen, entfällt das DOM-Parsen vollständig und Sie erhalten gut strukturierte Datensätze. Sowohl Puppeteer als auch Playwright ermöglichen es Ihnen, auf Antworten zu warten und die gewünschten zu erfassen. Das folgende Puppeteer-Beispiel erfasst jede JSON-Antwort von einem API-Pfad:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();

const captured = [];
page.on('response', async (response) => {
  const url = response.url();
  if (url.includes('/api/') && response.headers()['content-type']?.includes('application/json')) {
    try {
      captured.push(await response.json());
    } catch (err) {
      // non-JSON body, ignore
    }
  }
});

await page.goto('https://example.com/feed', { waitUntil: 'networkidle2' });
console.log(`Captured ${captured.length} JSON payloads`);
await browser.close();

Sobald Sie die Endpunkt-URL und ihre Parameter kennen, können Sie den Browser oft vollständig weglassen und die JSON API mit einfachem fetch aufrufen. Übergeben Sie dabei dieselben Header, die die Seite gesendet hat. So erhalten Sie die Geschwindigkeit eines statischen Scrapers bei der Vollständigkeit eines gerenderten Scrapers. Für dynamische Websites ist dies der größte mögliche Performancegewinn.

Welche ethischen und rechtlichen Grenzen gelten für Scraping?

Scrapen Sie nur öffentliche Daten, respektieren Sie robots.txt und die Nutzungsbedingungen der Website, vermeiden Sie personenbezogene Daten und überlasten Sie niemals einen Server. Diese Praktiken machen Ihr Projekt sowohl vertretbar als auch nachhaltig.

Prüfen Sie die Datei robots.txt im Stammverzeichnis der Domain, um zu sehen, welche Pfade eine Website Crawler bittet zu meiden, und nehmen Sie diese Hinweise ernst. Kennzeichnen Sie Ihren Scraper mit einem ehrlichen User-Agent, drosseln Sie Ihre Anfragen und cachen Sie Antworten, damit Sie dieselbe Seite nicht unnötig erneut abrufen. Auch die Herkunft Ihrer IP-Adressen ist auf Infrastrukturebene wichtig. DataImpulse betreibt ethische Proxys, die von Nutzern stammen, die ausdrücklich zustimmen und vergütet werden. Der Dienst ist an der GDPR ausgerichtet, und eine Vereinbarung zur Auftragsverarbeitung ist verfügbar. Ethik ist nicht nur eine Compliance-Frage: Höfliche, transparente Scraper sind auch diejenigen, die dauerhaft funktionieren. Die Grundsätze nachhaltiger Datenerhebung erläutert unser Leitfaden zu ethischem Web Scraping.

Häufig gestellte Fragen

Verwandte Leitfäden

• Dynamische Webseiten scrapen
• Web Scraping mit Rust
• Bilder von einer Website scrapen

Starten Sie das Scraping mit zuverlässigen Proxys

Möchten Sie Ihre JavaScript-Scraper ohne ständige Sperren betreiben? DataImpulse bietet Ihnen ethisch beschaffte Residential-, mobile und Datacenter-IPs ab 1 Dollar pro GB, mit nicht ablaufendem Traffic und ohne Abonnement. Konto erstellen und leiten Sie noch heute Ihren ersten Scraper über einen Proxy.