Використання CSS-селекторів для пошуку елементів на веб-сторінці

1. Згадуємо CSS-селектори

Ласкаво просимо в наш світ, де HTML-сторінки розкривають свої секрети не за помахом пальця, а за чітким CSS-селектором. Якщо ти думаєш, що CSS-селектори потрібні лише для стилізації сторінок (ну, щоб твій сайт не виглядав як зошит школяра), час відкрити свій третій око скрейпера. Сьогодні розглянемо, як CSS-селектори можуть стати твоїм улюбленим інструментом для пошуку і вилучення даних.

CSS-селектори, як ласкаве звертання, дозволяють нам звертатися до елементів HTML. Вони допомагають визначити, які елементи на сторінці ти хочеш обробити. Якщо HTML-сторінка — це лабіринт, то CSS-селектори — це червона нитка, що дозволяє знайти вихід.

Приклади CSS-селекторів

• Тег: p — вибирає всі <p> елементи (параграфи).
• Клас: .classname — вибирає всі елементи з заданим класом.
• ID: #idname — вибирає елемент з певним ID.
• Комбінації: div > p — вибирає всі <p>, які є безпосередніми дочірніми елементами <div>.

2. Використання селекторів у BeautifulSoup

Прощавай, нудне життя без CSS-селекторів у BeautifulSoup! Час освіжити наш підхід. Уявімо ситуацію: ти натрапив на сайт і просто зобов'язаний витягнути звідти всі цитати великих мудреців, щоби справити враження на співбесіді. Для цього ми використовуємо метод select(), який працює саме з CSS-селекторами.

Метод select() і select_one()

Метод select() поверне тобі список усіх елементів, які відповідають твоєму селектору. А select_one() знайде для тебе перший елемент, який відповідає селектору, — як пошуковик, що повертає саме те, що потрібно, а не кілометровий список непотрібних ресурсів.

Допустимо, у тебе є HTML-сторінка, яка містить цитати:

<div class="quote">
    <h2 class="author">Шелдон Купер</h2>
    <p class="text">Я не божевільний, моя матуся мене перевіряла.</p>
    <a href="https://example.com" class="link">Читати далі</a>
</div>
<div class="quote">
    <h2 class="author">Пенні</h2>
    <p class="text">О, ти ж моя солодка булочка, яка ти добра.</p>
    <a href="https://example.com" class="link">Читати далі</a>
</div>
<div class="quote">
    <h2 class="author">Говард Воловіц</h2>
    <p class="text">Я не просто інвестор, я космічний інженер, який іноді інвестує!</p>
    <a href="https://example.com" class="link">Читати далі</a>
</div>

Ось як ми можемо їх отримати:

from bs4 import BeautifulSoup
import requests

# Отримуємо HTML-код сторінки
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')

# Знаходимо всі цитати за допомогою 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'Цитата: {text}\\nАвтор: {author}\\n')

Хіба це не зручно до межі магії? Клас .quote допомагає нам забрати всі елементи, позначені як цитати, а .text і .author — це дочірні елементи, з яких ми витягуємо текст цитати та автора.

3. Приклади пошуку з CSS-селекторами

Попрактикуємось на прикладах, щоб твій розумний мозок знав, що робити, коли побачить div із десятьма класами. Селектори можна використовувати для більш цілеспрямованого пошуку даних на сторінках. Ти можеш комбінувати їх, щоби отримати саме те, що тобі потрібно.

Селектор за класом і тегом

# Пошук усіх посилань у блоці меню
menu_links = soup.select('nav.menu a')

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

Селектор за ID

# Витяг основного заголовка сторінки
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

Комбінування селекторів

# Пошук усіх речень у виділеній секції
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. Помилки і способи їх уникнення

Твоя робота як скрейпера не завжди буде легкою, як чашка кави. Бувають випадки, коли CSS-селектори можуть не спрацювати, якщо:

• Сторінка має змінюваний динамічний контент, і потрібні елементи завантажуються через JavaScript.
• Ти звертаєшся до селектора, якого не існує (наприклад, допущена помилка в написанні класу або ID).
• Структура HTML змінюється, що ускладнює пошук потрібних елементів.

Щоб уникнути таких помилок, переконайся, що ти працюєш з актуальною та статичною версією HTML-документа, а також слідкуй за точністю написання селекторів.

Практичне застосування

Тепер у тебе є можливість використовувати CSS-селектори в реальних проєктах для вилучення даних. Цей навик стане у пригоді під час створення інструментів для аналізу і моніторингу цін, отримання новин і навіть відстеження змін на сайтах. Перевага підходу в тому, що навіть якщо сайт змінить зовнішній вигляд завдяки CSS, твій код залишиться функціональним, адже він залежить від HTML-структури, а не від стилізації.