0Pricing
R Academy · Lezione

Struttura HTML e selettori CSS

Comprenda gli alberi DOM e scriva selettori CSS per individuare gli elementi.

Struttura HTML e selettori CSS è una lezione R Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento R Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso R Academy include 4 lezioni in totale.

L'albero DOM dell'HTML

Ogni pagina web è strutturata come un albero del Document Object Model (DOM). Gli elementi HTML sono annidati gli uni negli altri e formano una gerarchia padre-figlio. Il web scraping percorre questo albero per estrarre i dati.

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

Selettore CSS: selettore di tag

Il selettore CSS più semplice individua gli elementi in base al loro nome del tag. Scrivendo p si selezionano tutti gli elementi paragrafo. Scrivendo h1 si selezionano tutte le intestazioni di livello 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')

Selettore CSS: classe e ID

Utilizzi .classname per selezionare gli elementi in base alla classe e #idname per selezionare un elemento univoco tramite ID. Le classi possono comparire molte volte; gli ID dovrebbero essere univoci nella pagina.

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

Selettori di discendenti e figli

div p seleziona qualsiasi p all'interno di un div, a qualsiasi profondità. div > p seleziona solo i figli diretti. h1 + p seleziona un p che segue immediatamente un h1, ovvero un fratello adiacente.

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

Selettori di attributi

I selettori CSS per attributo consentono di filtrare in base agli attributi HTML: [attr] verifica l'esistenza, [attr='val'] verifica il valore esatto, [attr*='val'] verifica se il valore contiene una sottostringa.

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'

Nozioni di base su XPath

XPath è un'alternativa ai selettori CSS, più potente per le query complesse. In rvest utilizzi html_element(html, xpath='//tag'). //p indica qualsiasi p in qualunque punto; /html/body/p è un percorso assoluto.

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)

Combinare i selettori

I selettori possono essere combinati per ottenere maggiore precisione. div.card h2 seleziona gli h2 all'interno di un div con classe card. Una virgola separa più selettori indipendenti: h1, h2, h3 seleziona tutti e tre i livelli di intestazione.

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)

Strumento SelectorGadget

SelectorGadget è un bookmarklet del browser che aiuta a trovare interattivamente i selettori CSS. Faccia clic sugli elementi desiderati, evidenziati in verde, e su quelli indesiderati, evidenziati in rosso: lo strumento genera automaticamente il selettore CSS minimo.

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

Ispezionare le pagine negli strumenti per sviluppatori

Gli strumenti per sviluppatori del browser (F12) consentono di ispezionare direttamente il DOM. Faccia clic con il pulsante destro del mouse su un elemento, scelga Inspect e il pannello Elements mostrerà l'HTML. Passando il mouse sugli elementi, questi vengono evidenziati nella pagina, aiutandola a individuare il tag, la classe e l'ID esatti da selezionare.

# 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-classi e nth-child

Le pseudo-classi CSS come :first-child, :last-child e :nth-child(n) consentono di selezionare gli elementi in base alla loro posizione all'interno del padre, utile quando gli elementi non hanno classi distintive.

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

Regole di specificità dei selettori

Quando più selettori potrebbero corrispondere, la specificità determina quale prevale. Gli ID hanno la precedenza sulle classi; le classi hanno la precedenza sui tag. Nel web scraping questo è meno importante, ma conoscere la specificità aiuta a scrivere selettori precisi che evitano corrispondenze errate.

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)

Verifica rapida

Verifichi la Sua comprensione dei selettori CSS utilizzati nel web scraping con rvest.

Riepilogo: selettori HTML e CSS

Punti chiave: il DOM è un albero; i selettori CSS consentono di esplorarlo. Usi tag per il tipo di elemento, .class per la classe, #id per gli elementi univoci, > per i figli diretti e [attr] per gli attributi. SelectorGadget e DevTools aiutano a individuare interattivamente i selettori. XPath (//tag[@attr]) gestisce i casi in cui i selettori CSS non sono sufficienti.

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

Domande Frequenti

La lezione «Struttura HTML e selettori CSS» è gratuita?

Sì — il testo completo di «Struttura HTML e selettori CSS» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso R Academy, passa a CoddyKit PRO. Il corso R Academy include 4 lezioni in totale.

Cosa imparerò in «Struttura HTML e selettori CSS»?

Comprenda gli alberi DOM e scriva selettori CSS per individuare gli elementi. Eserciti R Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare R Academy?

Non è richiesta alcuna esperienza precedente. R Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Struttura HTML e selettori CSS»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione R Academy?

Sì. Ogni lezione R Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Struttura HTML e selettori CSS
  2. Basi di html_element() e html_text()
  3. Acquisizione di tabelle e link
  4. Gestione della paginazione e di più pagine
← Torna a R Academy