Как разобрать веб-страницу с помощью селекторов | Очистка с помощью 🐍

Вы когда-нибудь слышали о селекторах 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, применяя некоторые из концепций, которые мы видели сегодня. А потом мы запачкаем руки, используя все эти новые знания, чтобы создать парсер на реальном веб-сайте.

Ресурсы

Спасибо за прочтение!

Надеюсь, вам понравилось и до скорой встречи 🤠