R Academy · Lektion

HTML-struktur og CSS-selectors

Forstå DOM-træer, og skriv CSS-selectors til at målrette elementer.

Lektion 1 af 413 trin

HTML-struktur og CSS-selectors er en gratis R Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i R Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. R Academy-kurset indeholder 4 lektioner i alt.

HTML-DOM-træet

Alle websider er struktureret som et Document Object Model (DOM)-træ. HTML-elementer ligger indlejret i hinanden og danner et hierarki af forældre og børn. Webscraping navigerer i dette træ for at udtrække data.

# 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-vælger: Tag-vælger

Den enkleste CSS-vælger målretter elementer efter deres tagnavn. Hvis du skriver p, vælges alle afsnitselementer. Hvis du skriver h1, vælges alle overskrifter på niveau 1.

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-vælger: Klasse og ID

Brug .classname til at vælge elementer efter klasse og #idname til at vælge ét entydigt element efter ID. Klasser kan forekomme mange gange; ID'er bør være entydige på siden.

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'))

Vælgere for efterkommere og børn

div p vælger alle p-elementer inde i en div (uanset dybde). div > p vælger kun direkte børn. h1 + p vælger et p-element, der følger umiddelbart efter et h1 (en tilstødende søskende).

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

Attributvælgere

CSS-attributvælgere lader dig filtrere efter HTML-attributter: [attr] kontrollerer, om attributten findes, [attr='val'] kontrollerer den nøjagtige værdi, og [attr*='val'] kontrollerer, om værdien indeholder en delstreng.

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'

Grundlæggende XPath

XPath er et alternativ til CSS-vælgere og er mere effektivt til komplekse forespørgsler. I rvest skal du bruge html_element(html, xpath='//tag'). //p betyder ethvert p hvor som helst; /html/body/p er en absolut sti.

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)

Kombination af vælgere

Vælgere kan kombineres for at opnå større præcision. div.card h2 vælger h2 inde i en div med klassen card. Et komma adskiller flere uafhængige vælgere: h1, h2, h3 vælger alle tre overskriftsniveauer.

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)

Værktøjet SelectorGadget

SelectorGadget er en browser-bookmarklet, der hjælper dig med interaktivt at finde CSS-vælgere. Klik på de elementer, du ønsker (markeret med grønt), og de elementer, du ikke ønsker (markeret med rødt) — så genererer den automatisk den mindst mulige CSS-vælger.

# 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')

Undersøg sider i DevTools

Browserens DevTools (F12) lader dig undersøge DOM'en direkte. Højreklik på et element, vælg Inspect, og panelet Elements viser HTML'en. Når du holder markøren over elementer, fremhæves de på siden, så du lettere kan identificere det nøjagtige tag, den nøjagtige klasse og det nøjagtige ID, du vil målrette.

# 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')

Pseudoklasser og nth-child

CSS-pseudoklasser som :first-child, :last-child og :nth-child(n) lader dig vælge elementer ud fra deres placering i deres forælder — hvilket er nyttigt, når elementerne mangler klasser, der kan skelne dem fra hinanden.

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')

Regler for vælgeres specificitet

Når flere vælgere kan matche, afgør specificitet, hvilken der vinder. ID'er slår klasser; klasser slår tags. Ved scraping betyder det mindre — men kendskab til specificitet hjælper dig med at skrive præcise vælgere, der undgår fejlagtige match.

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)

Hurtigt tjek

Test din forståelse af CSS-selektorer, der bruges til webskrabning med rvest.

Besvar den i den interaktive lektion

Opsummering: HTML- og CSS-selektorer

Vigtigste pointer: DOM'en er et træ, og CSS-selektorer navigerer i det. Brug tag til elementtypen, .class til klassen, #id til entydige elementer, > til direkte underordnede elementer og [attr] til attributter. SelectorGadget og DevTools hjælper dig med at finde selektorer interaktivt. XPath (//tag[@attr]) håndterer tilfælde, hvor CSS ikke rækker.

# 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')

Gratis at komme i gang

Lær R med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 43
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “HTML-struktur og CSS-selectors” gratis?

Ja — alle 3 lektioner i læringssporet R Academy, inklusive “HTML-struktur og CSS-selectors”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. R Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “HTML-struktur og CSS-selectors”?

Forstå DOM-træer, og skriv CSS-selectors til at målrette elementer. Du øver dig i R Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på R Academy?

Der kræves ingen tidligere erfaring. R Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “HTML-struktur og CSS-selectors”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne R Academy-lektion?

Ja. Alle R Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

HTML-struktur og CSS-selectors
Grundlæggende html_element() og html_text()
Scraping af tabeller og links
Håndtering af paginering og flere sider

← Tilbage til R Academy