Поиск элементов на странице DOM дерево HTML

Все примеры ниже выполнены в обозревателе Chrome

Поиск элементов можно осуществлять разными способами: используя атрибуты, CSS-селекторы или HTML-теги.

Примеры:

id="name_id": по идентификатору;
class="name_class": по имени класса;
<div>: по имени тега;
href="link": по атрибуту;
name="item": по значению атрибута.

Поиск по #id

Символ «#» является базовым селектором для поиска по значению атрибута id. Данный метод удобен, если на веб-странице используются уникальные идентификаторы, что позволяет сразу обратиться к нужному элементу. Это позволяет отказаться от дополнительной фильтрации, которая может приводить к неверному результату.

Для поиска по id используется синтаксис формата:

#значение_атрибута

В качестве альтернативы можно использовать синтаксис с квадратными скобками [id=’box’], запись аналогична #box. Выбор зависит только от личных предпочтений, результат полностью совпадает.

Понимание общего алгоритма использования селектора # является важным фактором в процессе разработки парсера. Полученный при помощи id элемент часто представляет собой точку входа для дальнейшего поиска нужного блока. Поскольку идентификатор имеет уникальное значение, это минимизирует вероятность появление ошибок и упрощает разработку общей логики работы скрипта. Важно помнить, что современные сайты могут иметь очень сложную структуры, отдельные блоки могут иметь значительную вложенность или загружаться только при определенных условиях. Ряд тегов могут иметь похожие классы. Все это заметно осложняет создания парсера, который будет стабильно работать при разных условиях.

Поиск по .class

Символ «.» представляет собой базовый селектор, который позволяет искать нужный элемент по имени класса. Используется достаточно простой и понятный синтаксис:

.имя_класса

В качестве альтернативы можно использовать формат с квадратными скобками:

[class="headers"]

Стоит всегда помнить, что при работе с селектором класса можно получить несколько объектов, поскольку один класс часто присваивается нескольким объектам. Это важное отличие может приводить к ошибкам, если не учесть данную особенность.

Это может быть полезно, к примеру, если изначально стоит задача получить все объекты с указанным классом. В противном случае необходимо инициировать дополнительную фильтрацию по полученной выборке.

Поиск по имени тега

Самый простой способ найти нужный тег на странице – указать его в строке поиска панели разработчика браузера. Можно использовать, если необходимо получить все элементы определенного типа. Например, можно получить все абзацы (<p>), чтобы выделить текстовое наполнение страницы.

Если для поиска используется тег, который состоит из одной буквы, в результате поиска появится много мусора – текст и элементы, которые содержат данную букву. В этом случае необходимо писать тег вместе с угловыми скобками.

На практике чаще все приходится иметь дело с комбинированным поиском, например, появляется задача найти все абзацы с классом class23 и атрибутом my_class.

Пример реализации кода:

from bs4 import BeautifulSoup
import requests

# Получаем содержимое веб-страницы
response = requests.get('https://mob25.com')
response.encoding = 'utf-8'
soup = BeautifulSoup(response.text, 'html.parser')

# Комбинированный поиск: ищем все абзацы с классом "my_class" и атрибутом "data-example"
paragraphs = soup.select('p.my_class[data-example]')

# Выводим найденные элементы
for p in paragraphs:
    print(f'Найденный элемент: {p.text}')

Выше уже упоминалась возможность использовать квадратные скобки для оформления запроса, однако возможности такой записи гораздо шире. Можно искать произвольные атрибуты по их значениям. К примеру, запрос может выглядеть следующим образом: