Uso dei selettori CSS per cercare elementi sulla pagina web

1. Ripassiamo i selettori CSS

Benvenuto nel nostro mondo, dove le pagine HTML rivelano i loro segreti non con uno schiocco di dita, ma con un selettore CSS preciso. Se pensi che i selettori CSS servano solo a stilizzare le pagine (per far sembrare il tuo sito meglio di un quaderno di scuola mal scritto), è ora di aprire il tuo terzo occhio da scraper. Oggi vedremo come i selettori CSS possono diventare il tuo strumento preferito per cercare ed estrarre dati.

I selettori CSS, come un’espressione diminutiva e affettuosa, ci permettono di rivolgerci agli elementi HTML. Aiutano a definire quali elementi nella pagina vuoi processare. Se una pagina HTML è un labirinto, i selettori CSS sono il filo rosso che permette di trovare l'uscita.

Esempi di selettori CSS

• Tag: p — seleziona tutti gli elementi <p> (paragrafi).
• Classe: .classname — seleziona tutti gli elementi con una determinata classe.
• ID: #idname — seleziona l'elemento con un determinato ID.
• Combinazioni: div > p — seleziona tutti i <p> che sono figli diretti di <div>.

2. Uso dei selettori in BeautifulSoup

Addio, vita noiosa senza selettori CSS in BeautifulSoup! È ora di rinfrescare il nostro approccio. Immaginiamo questa situazione: ci imbattiamo in un sito e dobbiamo assolutamente estrarre tutte le citazioni dei grandi pensatori per fare colpo durante un colloquio. Per questo usiamo il metodo select(), che funziona proprio con i selettori CSS.

Il metodo select() e select_one()

Il metodo select() ti restituirà una lista di tutti gli elementi che corrispondono al tuo selettore. Invece, select_one() ti troverà il primo elemento che corrisponde al selettore — come un motore di ricerca che restituisce esattamente ciò che serve, senza una lista chilometrica di risorse inutili.

Supponiamo di avere una pagina HTML che contiene citazioni:

<div class="quote">
    <h2 class="author">Pushkin</h2>
    <p class="text">Ah, Pushkin.</p>
    <a href="https://example.com" class="link">Leggi di più</a>
</div>
<div class="quote">
    <h2 class="author">Lenin</h2>
    <p class="text">Studiare, studiare e ancora studiare.</p>
    <a href="https://example.com" class="link">Leggi di più</a>
</div>
<div class="quote">
    <h2 class="author">Stalin</h2>
    <p class="text">C'è una persona — c'è un problema, non c'è persona — non c'è problema.</p>
    <a href="https://example.com" class="link">Leggi di più</a>
</div>

Ecco come possiamo ottenerle:

from bs4 import BeautifulSoup
import requests

# Otteniamo il codice HTML della pagina
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')

# Troviamo tutte le citazioni con i selettori CSS
quotes = soup.select('.quote')

for quote in quotes:
    text = quote.select_one('.text').get_text()
    author = quote.select_one('.author').get_text()
    print(f'Citazione: {text}\\nAutore: {author}\\n')

Comodo, vero? La classe .quote ci aiuta a prendere tutti gli elementi indicati come citazioni, mentre .text e .author sono elementi figli da cui estraiamo il testo della citazione e dell'autore.

3. Esempi di ricerca con i selettori CSS

Facciamo pratica con alcuni esempi, così il tuo cervello sveglio saprà cosa fare quando vedrà un div con dieci classi. I selettori possono essere usati per ricerche più mirate di dati sulle pagine. Puoi combinarli per ottenere esattamente ciò che ti serve.

Selettore per classe e tag

# Trova tutti i link nel menu
menu_links = soup.select('nav.menu a')

for link in menu_links:
    print(link['href'])

Selettore per ID

# Estrai l'intestazione principale della pagina
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

Combinazione di selettori

# Trova tutte le frasi in una sezione evidenziata
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. Errori e come evitarli

Il tuo lavoro come scraper non sarà sempre semplice come una tazza di caffè. A volte i selettori CSS potrebbero non funzionare, se:

• La pagina ha un contenuto dinamico che cambia, e gli elementi necessari vengono caricati tramite JavaScript.
• Ti riferisci a un selettore che non esiste (ad esempio, hai fatto un errore di battitura nella classe o nell'ID).
• La struttura HTML cambia, creando una situazione in cui non riesci a trovare gli elementi desiderati.

Per evitare tali errori, assicurati di lavorare con una versione aggiornata e statica del documento HTML, e presta attenzione alla precisione nella scrittura dei selettori.

Applicazione pratica

Ora hai la possibilità di usare i selettori CSS in progetti reali di estrazione dati. Questa competenza è utile per creare strumenti per analizzare e monitorare prezzi, ottenere notizie e persino tracciare cambiamenti nei siti web. La bellezza di questo approccio sta nel fatto che, anche se un sito cambia il suo aspetto grazie al CSS, il tuo codice rimarrà funzionante, poiché si basa sulla struttura HTML, non sulla stilizzazione.

1

Опрос

Introduzione a BeautifulSoup,  31 уровень,  4 лекция

недоступен

Introduzione a BeautifulSoup

Introduzione a BeautifulSoup

Открыть