Użycie selektorów CSS do wyszukiwania elementów na stronie internetowej

1. Przypominamy sobie selektory CSS

Witaj w naszym świecie, gdzie strony HTML ujawniają swoje sekrety nie przez jedno pstryknięcie palcami, a przez celne użycie selektora CSS. Jeśli myślisz, że selektory CSS są potrzebne tylko do stylizacji stron (żeby twoja strona nie wyglądała jak zapisany zeszyt szkolny), czas obudzić w sobie trzecie oko scraper'a. Dziś przyjrzymy się, jak selektory CSS mogą stać się twoim ulubionym narzędziem do wyszukiwania i wyciągania danych.

Selektory CSS, niczym zdrobnienia, pozwalają nam zwracać się do elementów HTML. Pomagają określić, które elementy na stronie chcesz przetwarzać. Jeśli strona HTML to labirynt, to selektory CSS są czerwoną nicią, która pozwala znaleźć wyjście.

Przykłady selektorów CSS

• Tag: p — wybiera wszystkie <p> elementy (paragrafy).
• Klasa: .classname — wybiera wszystkie elementy z określoną klasą.
• ID: #idname — wybiera element z określonym ID.
• Kombinacje: div > p — wybiera wszystkie <p>, które są bezpośrednimi dziećmi elementu <div>.

2. Użycie selektorów w BeautifulSoup

Pożegnaj nudne życie bez selektorów CSS w BeautifulSoup! Czas odświeżyć nasze podejście. Wyobraź sobie sytuację: natrafisz na stronę i po prostu musisz wyciągnąć z niej wszystkie cytaty wielkich mędrców, żeby zrobić wrażenie na rozmowie o pracę. Do tego użyjemy metody select(), która działa właśnie z selektorami CSS.

Metody select() i select_one()

Metoda select() zwróci ci listę wszystkich elementów, które pasują do twojego selektora. A select_one() znajdzie dla ciebie pierwszy element, który pasuje do selektora — jak wyszukiwarka, która zwraca dokładnie to, czego potrzebujesz, zamiast kilometrowej listy bezużytecznych zasobów.

Załóżmy, że masz stronę HTML zawierającą cytaty:

<div class="quote">
    <h2 class="author">Puszkin</h2>
    <p class="text">Aj da Puszkin.</p>
    <a href="https://example.com" class="link">Czytaj dalej</a>
</div>
<div class="quote">
    <h2 class="author">Lenin</h2>
    <p class="text">Uczyć się, uczyć się i jeszcze raz uczyć się.</p>
    <a href="https://example.com" class="link">Czytaj dalej</a>
</div>
<div class="quote">
    <h2 class="author">Stalin</h2>
    <p class="text">Jest człowiek — jest problem, nie ma człowieka — nie ma problemu.</p>
    <a href="https://example.com" class="link">Czytaj dalej</a>
</div>

Oto jak możemy je pobrać:

from bs4 import BeautifulSoup
import requests

# Pobieramy kod HTML strony
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')

# Znajdujemy wszystkie cytaty za pomocą selektorów 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'Cytat: {text}\\nAutor: {author}\\n')

Prawda, że wygodne, prawie magiczne? Klasa .quote pomaga nam pobrać wszystkie elementy oznaczone jako cytaty, a .text i .author to elementy dzieci, z których wyciągamy tekst cytatu i autora.

3. Przykłady wyszukiwania z selektorami CSS

Poćwiczmy na przykładach, żeby twoja mądra głowa wiedziała, co robić, gdy zobaczy div z dziesięcioma klasami. Selektory mogą być używane do bardziej precyzyjnego wyszukiwania danych na stronach. Możesz je łączyć, aby uzyskać to, czego naprawdę potrzebujesz.

Selektor według klasy i tagu

# Szukanie wszystkich linków w bloku menu
menu_links = soup.select('nav.menu a')

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

Selektor według ID

# Pobranie głównego nagłówka strony
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

Łączenie selektorów

# Szukanie wszystkich zdań w wyróżnionej sekcji
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. Błędy i sposoby ich unikania

Twoja praca jako scraper'a nie zawsze będzie prosta jak filiżanka kawy. Zdarzają się sytuacje, w których selektory CSS mogą zawieść, jeśli:

• Strona ma zmieniającą się dynamicznie zawartość, a potrzebne elementy są ładowane przez JavaScript.
• Odwołujesz się do selektora, który nie istnieje (np. jest błąd w pisowni klasy lub ID).
• Struktura HTML zmienia się, co prowadzi do sceny z horroru, w której szukasz właściwych elementów.

Aby uniknąć takich błędów, upewnij się, że pracujesz ze stałą i aktualną wersją dokumentu HTML, a także zwracaj uwagę na dokładność pisowni selektorów.

Praktyczne zastosowanie

Teraz masz możliwość użycia selektorów CSS w prawdziwych projektach do wydobywania danych. Ta umiejętność przyda się podczas tworzenia narzędzi do analizy i monitorowania cen, pobierania wiadomości, a nawet śledzenia zmian na stronach. Piękno podejścia polega na tym, że nawet jeśli witryna zmieni wygląd dzięki CSS, twój kod pozostanie funkcjonalny, ponieważ opiera się na strukturze HTML, a nie na stylizacji.

1

Опрос

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

недоступен

Wprowadzenie do BeautifulSoup

Wprowadzenie do BeautifulSoup

Открыть