0Pricing
R Academy · Lektion

HTML-Struktur und CSS-Selektoren

Verstehen Sie DOM-Bäume und schreiben Sie CSS-Selektoren, um Elemente anzusprechen.

HTML-Struktur und CSS-Selektoren ist eine kostenlose R Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des R Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der R Academy-Kurs umfasst insgesamt 4 Lektionen.

Der HTML-DOM-Baum

Jede Webseite ist als Document Object Model (DOM)-Baum strukturiert. HTML-Elemente sind ineinander verschachtelt und bilden eine Eltern-Kind-Hierarchie. Web Scraping navigiert durch diesen Baum, um Daten zu extrahieren.

# HTML structure conceptually:
# <html>
#   <body>
#     <div class='container'>
#       <h1 id='title'>Hello</h1>
#       <p class='text'>World</p>
#     </div>
#   </body>
# </html>

# rvest lets us query this tree with CSS selectors
library(rvest)
html <- read_html('<div><h1>Title</h1><p class="info">Text</p></div>')
html_text(html_element(html, 'h1'))

CSS-Selektor: Tag-Selektor

Der einfachste CSS-Selektor wählt Elemente anhand ihres Tag-Namens aus. Mit p wählen Sie alle Absatzelemente aus. Mit h1 wählen Sie alle Überschriften der ersten Ebene aus.

library(rvest)
html <- read_html('
  <div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <h2>A heading</h2>
  </div>
')
# Tag selector: selects all <p> elements
nodes <- html_elements(html, 'p')
html_text2(nodes)
# Returns: c('First paragraph', 'Second paragraph')

CSS-Selektor: Klasse und ID

Verwenden Sie .classname, um Elemente anhand ihrer Klasse auszuwählen, und #idname, um ein eindeutiges Element anhand seiner ID auszuwählen. Klassen können mehrfach vorkommen; IDs sollten auf der Seite eindeutig sein.

library(rvest)
html <- read_html('
  <div>
    <p class="highlight">Important text</p>
    <p class="normal">Regular text</p>
    <span id="price">$9.99</span>
  </div>
')
# Class selector (prefix with .)
html_text2(html_element(html, '.highlight'))
# ID selector (prefix with #)
html_text2(html_element(html, '#price'))

Selektoren für Nachfahren und direkte Kinder

div p wählt jedes p-Element innerhalb eines div-Elements aus (in beliebiger Verschachtelungstiefe). div > p wählt nur direkte Kindelemente aus. h1 + p wählt ein p-Element aus, das unmittelbar auf ein h1-Element folgt (benachbarter Geschwisterknoten).

library(rvest)
html <- read_html('
  <div class="outer">
    <p>Direct child</p>
    <section>
      <p>Nested deeper</p>
    </section>
  </div>
')
# Descendant: both paragraphs
all_p <- html_elements(html, 'div p')
length(all_p)  # 2

# Direct child only
direct_p <- html_elements(html, 'div.outer > p')
length(direct_p)  # 1

Attributselektoren

Mit CSS-Attributselektoren können Sie nach HTML-Attributen filtern: [attr] prüft, ob ein Attribut vorhanden ist, [attr='val'] prüft auf einen exakten Wert, und [attr*='val'] prüft, ob der Wert ein Teilstück enthält.

library(rvest)
html <- read_html('
  <div>
    <a href="https://example.com">External</a>
    <a href="/about">Internal</a>
    <a>No href</a>
  </div>
')
# Select only anchors that have an href attribute
with_href <- html_elements(html, 'a[href]')
length(with_href)  # 2

# Select anchors with href starting with https
external <- html_elements(html, 'a[href^="https"]')
html_text2(external)  # 'External'

XPath-Grundlagen

XPath ist eine Alternative zu CSS-Selektoren und für komplexe Abfragen leistungsfähiger. Verwenden Sie in rvest html_element(html, xpath='//tag'). //p steht für jedes p-Element an beliebiger Stelle; /html/body/p ist ein absoluter Pfad.

library(rvest)
html <- read_html('
  <html><body>
    <table>
      <tr><td class="price">10.99</td></tr>
      <tr><td class="price">5.50</td></tr>
    </table>
  </body></html>
')
# XPath: select all td with class price
nodes <- html_elements(html, xpath = '//td[@class="price"]')
html_text2(nodes)
# c('10.99', '5.50')

# XPath text() function
nodes2 <- html_elements(html, xpath = '//td[contains(@class,"price")]')
html_text2(nodes2)

Selektoren kombinieren

Selektoren können für eine präzisere Auswahl kombiniert werden. div.card h2 wählt h2 innerhalb eines div-Elements mit der Klasse card aus. Ein Komma trennt mehrere unabhängige Selektoren: h1, h2, h3 wählt alle drei Überschriftenebenen aus.

library(rvest)
html <- read_html('
  <div class="card">
    <h2>Card Title</h2>
    <p class="desc">Description here</p>
    <span class="price">$19</span>
  </div>
  <div class="footer">
    <h2>Footer Heading</h2>
  </div>
')
# Only h2 inside .card
card_h2 <- html_element(html, 'div.card h2')
html_text2(card_h2)  # 'Card Title'

# Multiple selectors with comma
price_desc <- html_elements(html, '.price, .desc')
html_text2(price_desc)

Das Tool SelectorGadget

SelectorGadget ist ein Browser-Bookmarklet, das Sie beim interaktiven Ermitteln von CSS-Selektoren unterstützt. Klicken Sie auf die gewünschten Elemente (grün hervorgehoben) und auf die nicht gewünschten Elemente (rot hervorgehoben) – automatisch wird der kleinstmögliche CSS-Selektor erzeugt.

# SelectorGadget workflow:
# 1. Open target page in Chrome/Firefox
# 2. Activate SelectorGadget bookmarklet
# 3. Click element you want -> turns green, selector appears
# 4. Click elements you DON'T want -> turns red, selector narrows
# 5. Copy the selector shown at the bottom
# 6. Use in rvest:

library(rvest)
# Example: SelectorGadget found '.product-title' for us
# page <- read_html('https://books.toscrape.com')
# titles <- html_elements(page, '.product_pod h3 a')
# html_text2(titles)
cat('SelectorGadget is available at selectorgadget.com')

Seiten in den DevTools untersuchen

Mit den Browser-DevTools (F12) können Sie den DOM direkt untersuchen. Klicken Sie mit der rechten Maustaste auf ein beliebiges Element und wählen Sie Inspect; im Bereich „Elements“ wird das HTML angezeigt. Beim Darüberbewegen werden Elemente auf der Seite hervorgehoben, sodass Sie das genaue Tag, die Klasse und die ID für Ihre Auswahl erkennen können.

# DevTools workflow for finding selectors:
# 1. F12 -> Elements tab
# 2. Click the cursor icon (Inspector)
# 3. Click the element on the page
# 4. Right-click highlighted HTML -> Copy -> Copy selector
# 5. Paste selector into rvest

# The copied selector might look like:
# '#main > div.results > article:nth-child(1) > h3'
# Simplify it: usually '.results h3' works just as well

# Validate your selector in the Console with:
# document.querySelectorAll('.results h3')
library(rvest)
cat('Always verify selectors return the elements you expect')

Pseudo-Klassen und nth-child

Mit CSS-Pseudo-Klassen wie :first-child, :last-child und :nth-child(n) können Sie Elemente anhand ihrer Position innerhalb des Elternelements auswählen – nützlich, wenn Elemente keine unterscheidbaren Klassen besitzen.

library(rvest)
html <- read_html('
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
')
# First item
first <- html_element(html, 'li:first-child')
html_text2(first)  # 'First'

# Third item
third <- html_element(html, 'li:nth-child(3)')
html_text2(third)  # 'Third'

# Even items
evens <- html_elements(html, 'li:nth-child(even)')
html_text2(evens)  # c('Second', 'Fourth')

Regeln für die Spezifität von Selektoren

Wenn mehrere Selektoren zutreffen könnten, bestimmt die Spezifität, welcher Vorrang hat. IDs haben Vorrang vor Klassen, Klassen vor Tags. Beim Scraping ist das weniger wichtig – Kenntnisse über die Spezifität helfen Ihnen jedoch, präzise Selektoren zu schreiben und falsche Treffer zu vermeiden.

library(rvest)
html <- read_html('
  <div id="header" class="top">
    <p class="title">Main Title</p>
  </div>
  <div class="content">
    <p class="title">Content Title</p>
  </div>
')
# Overly broad: gets BOTH titles
broad <- html_elements(html, 'p.title')
html_text2(broad)

# Specific: only header title
specific <- html_element(html, '#header p.title')
html_text2(specific)  # 'Main Title'

# Be as specific as needed but not more
content_title <- html_element(html, '.content .title')
html_text2(content_title)

Kurztest

Testen Sie Ihr Verständnis von CSS-Selektoren, die beim Web-Scraping mit rvest verwendet werden.

Rückblick: HTML- und CSS-Selektoren

Wichtige Erkenntnisse: Das DOM ist ein Baum; CSS-Selektoren dienen dazu, darin zu navigieren. Verwenden Sie tag für den Elementtyp, .class für eine Klasse, #id für eindeutige Elemente, > für direkte Kindelemente und [attr] für Attribute. SelectorGadget und DevTools helfen Ihnen dabei, Selektoren interaktiv zu ermitteln. XPath (//tag[@attr]) ist für Fälle geeignet, in denen CSS nicht ausreicht.

# Summary of key CSS selectors for web scraping:
# 'p'            -> all <p> elements
# '.price'       -> elements with class='price'
# '#main'        -> element with id='main'
# 'div > p'      -> direct child p of div
# 'a[href]'      -> a elements that have href attr
# 'a[href*=http] -> a elements where href contains 'http'
# 'li:nth-child(2)' -> second li in its parent
# 'h1, h2'       -> both h1 and h2 elements
# xpath='//td[@class="price"]' -> XPath alternative
library(rvest)
cat('Selectors are the foundation of reliable web scraping')

Häufig gestellte Fragen

Ist die Lektion „HTML-Struktur und CSS-Selektoren“ kostenlos?

Ja — der vollständige Text von „HTML-Struktur und CSS-Selektoren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des R Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der R Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „HTML-Struktur und CSS-Selektoren“?

Verstehen Sie DOM-Bäume und schreiben Sie CSS-Selektoren, um Elemente anzusprechen. Du übst R Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um R Academy zu starten?

Keine Vorkenntnisse erforderlich. R Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „HTML-Struktur und CSS-Selektoren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser R Academy-Lektion Code schreiben und ausführen?

Ja. Jede R Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. HTML-Struktur und CSS-Selektoren
  2. Grundlagen von html_element() und html_text()
  3. Tabellen und Links scrapen
  4. Paginierung und mehrere Seiten verarbeiten
← Zurück zu R Academy