R Academy · Lekcja

Struktura HTML i selektory CSS

Poznaj drzewa DOM i pisz selektory CSS do wybierania elementów.

Struktura HTML i selektory CSS to bezpłatna lekcja R Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej R Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs R Academy zawiera 4 lekcji w sumie.

Drzewo DOM dokumentu HTML

Każda strona internetowa ma strukturę drzewa Document Object Model (DOM). Elementy HTML są zagnieżdżone w sobie, tworząc hierarchię rodzic-dziecko. Web scraping polega na nawigowaniu po tym drzewie w celu wyodrębnienia danych.

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

Selektor CSS: selektor tagu

Najprostszy selektor CSS wybiera elementy na podstawie ich nazwy tagu. Zapis p wybiera wszystkie elementy akapitu. Zapis h1 wybiera wszystkie nagłówki pierwszego poziomu.

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

Selektor CSS: klasa i ID

Użyj .classname, aby wybierać elementy na podstawie klasy, oraz #idname, aby wybrać unikalny element na podstawie identyfikatora ID. Klasy mogą występować wiele razy, natomiast identyfikatory ID powinny być unikalne na stronie.

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

Selektory potomków i dzieci

div p wybiera dowolny element p znajdujący się wewnątrz div (na dowolnym poziomie zagnieżdżenia). div > p wybiera tylko bezpośrednie dzieci. h1 + p wybiera element p znajdujący się bezpośrednio po h1 (sąsiadujący element tego samego poziomu).

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

Selektory atrybutów

Selektory atrybutów CSS umożliwiają filtrowanie na podstawie atrybutów HTML: [attr] sprawdza istnienie atrybutu, [attr='val'] sprawdza jego dokładną wartość, a [attr*='val'] sprawdza, czy wartość zawiera dany podciąg.

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'

Podstawy XPath

XPath jest alternatywą dla selektorów CSS i lepiej sprawdza się w przypadku złożonych zapytań. W rvest należy użyć html_element(html, xpath='//tag'). //p oznacza dowolny element p w dowolnym miejscu, a /html/body/p — ścieżkę bezwzględną.

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)

Łączenie selektorów

Selektory można łączyć, aby zwiększyć precyzję. div.card h2 wybiera elementy h2 znajdujące się wewnątrz elementu div z klasą card. Przecinek oddziela wiele niezależnych selektorów: h1, h2, h3 wybiera wszystkie trzy poziomy nagłówków.

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)

Narzędzie SelectorGadget

SelectorGadget to bookmarklet przeglądarkowy, który pomaga interaktywnie znajdować selektory CSS. Należy kliknąć elementy, które mają zostać uwzględnione (zaznaczone na zielono), oraz te, które mają zostać pominięte (zaznaczone na czerwono) — narzędzie automatycznie wygeneruje minimalny selektor CSS.

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

Inspekcja stron w DevTools

DevTools przeglądarki (F12) umożliwiają bezpośrednią inspekcję DOM. Należy kliknąć element prawym przyciskiem myszy i wybrać Inspect, aby panel Elements wyświetlił kod HTML. Najechanie kursorem wyróżnia elementy na stronie, pomagając zidentyfikować właściwy tag, klasę i identyfikator ID.

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

Pseudoklasy i nth-child

Pseudoklasy CSS, takie jak :first-child, :last-child i :nth-child(n), umożliwiają wybieranie elementów na podstawie ich pozycji względem elementu nadrzędnego — jest to przydatne, gdy elementy nie mają wyróżniających je klas.

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

Reguły specyficzności selektorów

Gdy pasować może wiele selektorów, o tym, który z nich zostanie użyty, decyduje specyficzność. Identyfikatory ID mają pierwszeństwo przed klasami, a klasy przed tagami. W web scrapingu ma to mniejsze znaczenie, ale znajomość specyficzności pomaga pisać precyzyjne selektory, które nie dopasowują przypadkowych elementów.

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)

Szybki test

Sprawdź, czy rozumie Pan/Pani selektory CSS używane w web scrapingu za pomocą rvest.

Podsumowanie: selektory HTML i CSS

Najważniejsze informacje: DOM ma strukturę drzewa, a selektory CSS służą do poruszania się po nim. Używaj tag do określania typu elementu, .class do określania klasy, #id dla unikatowych elementów, > dla bezpośrednich elementów potomnych oraz [attr] dla atrybutów. SelectorGadget i DevTools pomagają interaktywnie wyszukiwać selektory. XPath (//tag[@attr]) obsługuje przypadki, w których CSS nie wystarcza.

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

Często zadawane pytania

Czy lekcja „Struktura HTML i selektory CSS” jest bezpłatna?

Tak — pełny tekst „Struktura HTML i selektory CSS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu R Academy, przejdź na CoddyKit PRO. Kurs R Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Struktura HTML i selektory CSS”?

Poznaj drzewa DOM i pisz selektory CSS do wybierania elementów. Ćwiczysz R Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć R Academy?

Nie wymagamy żadnego doświadczenia. R Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Struktura HTML i selektory CSS”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji R Academy?

Tak. Każda lekcja R Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do R Academy