Как разобрать веб-страницу с помощью селекторов | Очистка с помощью 🐍
Вы когда-нибудь слышали о селекторах XPath или CSS? Сегодня мы познакомимся с этими мощными инструментами, которые являются квинтэссенцией любого проекта парсинга.
Этот пост является частью серии «Очистка с помощью Python 🐍», в которой я намерен объяснить и преподать от базовых до наиболее сложных концепций очистки .
Первое правило сканирования Интернета - не причинять вреда веб-сайту. Второе правило сканирования Интернета: вы НЕ вредите веб-сайту . - от ScrapingHub
Вступление
Селекторы - это мощные инструменты, позволяющие выбрать любой узел в дереве HTML. Благодаря селекторам выбор узла или их группы становится очень простым. Они лежат в основе процесса соскабливания, а также в основе этого поста 😉
- В первом эпизоде мы рассмотрели основные принципы соскабливания; узнать, как работает Интернет, уточнить различные способы сбора данных и представить некоторые инструменты Python, полезные для парсинга веб-страниц.
- Сегодня мы рассмотрим этапы синтаксического анализа. Действительно, если существуют разные пакеты Python для анализа содержимого веб-страницы, исследование основывается на тех же принципах: использование селекторов для точного извлечения желаемой информации.
- В следующий раз мы познакомим вас с фреймворком Scrapy, который частично основан на концепции селекторов.
Дизайн веб-страницы: сочетание CSS и HTML
Определения
- H yper T ext M arkup L язык: это язык разметки, предназначенный для представления веб-страниц. Он состоит из семантической структуры страницы,
форматирования содержимого и включения мультимедийных ресурсов. - C ascading S tyle S heets: это язык описания Интернета и устанавливает представление файлов HTML. CSS разработан для разделения представления и содержимого, включая макет, цвета и шрифты.
Взаимодействия
Чтобы прояснить взаимодействие между обоими этими языками, один файл CSS ни к чему не отрисовывается и не приводит к чему-либо. Только HTML-файл будет отображаться, но будет выглядеть как пустая страница с черными строками текста. Довольно уродливые. Комбинация этих двух вещей позволит создавать красивые веб-страницы, какими вы их привыкли видеть.
HTML-дерево
HTML состоит из последовательности тегов. Каждый тег состоит из трех частей:
- Сам элемент тега: это глобальная индикация содержимого тега. Самые известные из них:
div
для блоков,p
для абзацев текста,h1
для заголовков,a
для ссылок. - Его атрибуты: они помогают лучше описать тег и то, для чего он будет использоваться.
- Это контент: это может быть текст, изображения, другие теги или любой другой тип контента, который вы можете найти на веб-странице.
Каждый тег открывается по имени, обрамленному <
и >
, и закрывается по имени, обрамленному </
и >
.
При работе с HTML-файлом нужно соблюдать лишь несколько правил:
- Все документы HTML должны начинаться с объявления типа документа:
<!DOCTYPE html>
. - Сам HTML-документ начинается с
<html>
и заканчивается</html>
. - Теги могут содержать другие теги, но тег, открытый внутри тега, должен быть закрыт внутри того же тега. Перекрестки не допускаются.
Список HTML-тегов доступен здесь. Вы должны помнить, что количество тегов ограничено. И у каждого тега могут быть свои атрибуты.
Вот пример очень простой веб-страницы.
Таким образом, из-за этого последнего правила HTML-файл можно рассматривать как дерево, в котором каждый тег является узлом 🌳
Мы скоро вернемся к этому понятию дерева, а пока давайте кратко поговорим о CSS😉
Стиль CSS
CSS - это описательный язык, который дополняет файлы HTML, чтобы они выглядели намного лучше.
Он соответствует ряду описательных характеристик для каждого типа тегов, которые вы можете найти в файле HTML. По сути, он будет иметь дело с цветами, шрифтами, положением блока, полями и т. Д.
Каждый блок будет номинирован, а затем будет список этих характеристик.
Существуют десятки и десятки определенных свойств, которые можно использовать, поэтому я не буду их перечислять, но Документация Mozilla часто бывает очень полезной.
Вы могли заметить, что в приведенном выше примере для <p>
tags было id
атрибутов. Фактически, есть два атрибута, которые могут (необязательно) быть установлены для каждого тега HTML:
id
: должно быть уникальным для файла HTML. Это позволяет настроить таргетинг на конкретный тег.class
: используется для группировки тегов схожего назначения
Затем, когда они определены, можно стилизовать теги с помощью их класса или идентификатора в дополнение к их типу тега.
id
: используйте#id_value
для доступа к тегу.class
: используйте.id_value
для доступа к тегам.
Пример
Для иллюстрации вот визуализированные HTML-файлы из предыдущих примеров:
- Без CSS
- С помощью CSS, определенного выше
Ладно, интерфейс не очень красивый, но для базового примера его хватит 😉
Селекторы: квинтэссенция соскабливания
Теперь вы знаете и понимаете, как создается веб-страница. Это самый первый шаг к созданию скребка. В этой части мы увидим, как извлекать данные с веб-страницы.
Ранее мы видели, что HTML-файл (веб-страница) можно интерпретировать как 🌳
Селекторы - это метод прямого и краткого доступа к одному или нескольким узлам этого 🌳. Это строки, которые можно рассматривать как линейное представление запрошенных элементов. С их помощью вы можете выбирать содержимое тегов или значение их атрибутов.
Существует два хорошо известных языка выбора: XPath и Локаторы CSS. Давайте посмотрим на них поближе.
XPath
Принцип очень простой. Чтобы получить доступ к узлу, необходимо указать путь, используемый от верхней части 🌳 до желаемого узла.
Например, если мы хотим выбрать тег <h1>
из предыдущего примера, мы указываем: xpath = '/html/body/h1'
Вот основные правила извлечения практически любого контента с веб-страницы:
- Чтобы выбрать все определенные теги, соответствующие запросу, используйте двойную полосу (
//
) вместо (/)
.
Пример:xpath = '//p'
будет напрямую выбирать оба<p>
тега. - Чтобы выбрать все дочерние элементы выделения, используйте подстановочный знак
/*
.
Пример:xpath = '/html/body/*'
выберет теги<h1>
и<p>
. - Чтобы выбрать N-й элемент списка, используйте
[n]
после тега.
Пример:xpath = '/html/body/p[2]'
выберет только второй тег<p>
(индекс начинается с 1). - Чтобы выбрать элементы с определенным значением атрибута, используйте
[@attribute="attribute_value"]
после тега.
Пример:xpath = '/html/body/p[@id="parsing"]'
выберет только 1-й тег<p>
. - Чтобы выбрать элементы только с частью атрибута (что часто бывает полезно, когда тег имеет несколько классов и вы хотите настроить таргетинг на конкретный), используйте
[contains(@attribute, "contained_attribute_value")]
после тега.
Пример:xpath = '//p[contains(@class, "my_class")]'
выберет все<p>
теги, у которых есть класс, содержащий строкуmy_class
(т.е. работает, еслиclass
attribute равен"my_class", "my_class_1"
,"my_class_2"
или имеет несколько значений"my_class your_class"
).
Со всеми этими правилами вы сможете легко получить доступ практически к любому тегу веб-страницы, независимо от ее структуры. Затем, как только вы получите правильный тег, вы можете захотеть получить другую информацию:
- Текст содержания: добавьте
'/text'
в селектор.
Примерxpath = '//p/text'
вернет список из двух значений['My first paragraph'
,'My second paragraph']
.
Какой текст из двух выбранных тегов<p>
. - Значения его атрибутов: добавьте
'/@attribute'
в свой селектор.
Примерxpath = '//p[1]/@id'
вернет значение атрибутаid
первого выбранного тега<p>
. Какой текст'My first paragraph'
. Это часто бывает полезно при сканировании для доступа кhref
атрибутам тегов<a>
, которые содержат значения тегов ссылок.
CSS-локаторы
Они очень похожи на XPath, и основное различие заключается в использовании >
для разделения тегов вместо/
. Вот карта перевода из предыдущих примеров.
'/html/body/h1'
➡️'html > body > h1'
'html//p'
➡️'html p'
'/html/body/p[2]'
➡️'html > body > p:nth-of-type(2)'
'/html/body/p[@id="parsing"]'
➡️'html > body > p#parsing'
'/html/body/p[@class="my_class"]'
➡️'html > body > p.my_class'*
А для извлечения содержимого или атрибутов используйте синтаксис ::
.
'//p/text'
➡️' p::text()'
'//p[1]/@id'
➡️' p::attr(id)'
Советы и хитрости
- Оба этих языка работают хорошо, и в зависимости от случая один или другой может быть более эффективным.
- Локаторы CSS легче читать, особенно при выборе
class
илиid
. - XPath позволяет делать более конкретные запросы, когда дело доходит до атрибутов
- В следующей части мы увидим, как использовать селекторы в Python с Scrapy, и что селекторы можно связывать один за другим.
Исследование веб-страницы
Теперь вы теоретически знаете, как извлекать данные с веб-страницы. Но вы можете задаться вопросом, как визуализировать и как использовать это на реальных веб-сайтах.
Надеюсь, есть очень простой способ исследовать содержимое HTML; в большинстве браузеров есть набор инструментов для разработчиков, что делает его очень удобным. В зависимости от вашей операционной системы вы можете использовать следующие команды.
Что открывает своего рода исследование справа или внизу вашего интернет-окна.
Теперь вы готовы приступить к синтаксическому анализу, а структура веб-страниц почти не содержит для вас секретов 😉
Заключение
Во второй части серии «Очистка с помощью Python 🐍» вы узнали, как структурируется веб-страница с помощью HTML и CSS. А затем, основываясь на этих характеристиках, вы узнали, как выбирать любой контент из файла HTML с помощью селекторов.
Это было теоретически; В следующей части мы получим еще немного теории о проектах Scrapy, применяя некоторые из концепций, которые мы видели сегодня. А потом мы запачкаем руки, используя все эти новые знания, чтобы создать парсер на реальном веб-сайте.
Ресурсы
- Как вежливо сканировать Интернет с помощью Scrapy, ScrapingHub
- Мягкое введение в веб-парсинг, Тибо Ламот
- Список доступных HTML-тегов, Mozilla Developer
- Документация CSS, Разработчик Mozilla
- Документация пакета Scrapy Python, Scrapy
Спасибо за прочтение!
Надеюсь, вам понравилось и до скорой встречи 🤠