HTML для скрапера: DOM, теги, атрибуты

Браузер, получив HTML, строит из него DOM — объектную модель документа, и dom дерево страницы — это иерархия узлов: элемент внутри элемента внутри элемента. У каждой ветки есть родитель, у элементов — дети, у текста внутри тегов — текстовые узлы. Корень дерева — html, под ним head и body, и дальше разметка разветвляется по вложенности. Скраперу это дерево важно по одной причине: селекторы в colly ищут не строки в тексте, а узлы в дереве, и результат поиска зависит от того, где именно лежит узел и кто его предки. Один и тот же span на верхнем уровне и span внутри карточки товара — разные цели для селектора. Вложенность читается по отступам в исходнике: всё, что открыто между открывающим и закрывающим тегом контейнера, — его потомки. Ошибка новичка — судить о структуре по визуальному расположению на экране: браузер растягивает и переносит элементы так, что визуально рядом могут лежать узлы из разных веток дерева. Смотрите на вложенность, а не на картинку.

Тег задаёт тип узла — div, span, a, img, small, — а атрибуты приписаны тегу парами имя-значение. Для парсера значимы четыре вида: class и id, на которых держатся селекторы; href у ссылок и src у картинок — адреса, по которым ходит и качает скрапер; title и alt — человеческие подписи, в которых сайты любят прятать полные названия товаров; и data-атрибуты вида data-url, data-id — куда фронтенд складывает машиночитаемые значения. Текст узла — то, что лежит между открывающим и закрывающим тегом, — достаётся через e.Text, а атрибуты — через e.Attr; это два разных выхода из одного узла, и выбирать надо по тому, где данные надёжнее. Классический пример: у карточки товара в каталоге books.toscrape.com название обрезано в тексте ссылки до пары слов, а полный вариант лежит в атрибуте title той же ссылки — берут именно атрибут. Разметка обычно щедрее, чем кажется: у большинства узлов найдётся второй путь к данным.

Класс описывает тип или роль элемента, и один класс может носить сколько угодно узлов на странице — десять карточек каталога делят один класс product_pod. Идентификатор id по стандарту должен быть уникален в документе: один узел — один id, чаще всего это главный контейнер страницы вроде id="content" или навигация. Отсюда правило выбора для скрапера: повторяющиеся данные — цитаты, товары, строки таблицы — ищут по классам, потому что их много; привязку к конкретному месту страницы делают по id, если он есть и стабильный. Жизнь вносит поправки: современные фронтенд-фреймворки генерируют id автоматически, и они меняются от сборки к сборке, а на некоторых сайтах один id тихо повторяется пять раз, потому что верстальщику было удобно. Поэтому и класс, и id стоит проверять взглядом: откройте Elements, посчитайте совпадения, пройдитесь на вторую страницу каталога и убедитесь, что селектор ловит то же самое. Проверка занимает минуту и экономит вечер отладки.

Здесь спрятана ловушка, о которую спотыкаются все, кто привык к вкладке Elements. Скрапер получает исходный HTML-ответ сервера — то, что отдал сайт по сети, до всяких скриптов. Вкладка Elements показывает текущий DOM: после того как JavaScript успел дорисовать, переставить и удалить узлы. Для серверных страниц, как наши песочницы, разница почти нулевая. Но на сайтах с рендерингом в браузере Elements показывает данные, которых в исходном ответе нет: скрапер по селектору из Elements получит пустоту. Способ проверки без кода: правый клик по странице — «Просмотреть исходный код страницы» и поиск по тексту, который вы ищете. Нашли фрагмент в исходнике — colly до него доберётся; не нашли — данные приходят скриптом, и это уже разговор про браузерные движки из урока про пределы colly. Вторая половина той же мысли: текст, который вы видите на экране, может собираться из нескольких узлов и псевдоэлементов CSS, а e.Text берёт только то, что реально лежит в дереве.

Хорошие сайты оставляют для машин явные зацепки, и ими стоит пользоваться в первую очередь. Data-атрибуты — всё, что начинается с data-, — придуманы для того, чтобы JavaScript носил данные прямо в разметке: data-id="42", data-url="/product/42", data-price="1490". Они почти не участвуют в оформлении, поэтому живут дольше классов; для скрапера это часто лучший источник значений. Семантические теги — article, main, nav, table, header — описывают смысл блока, а не его вид: карточка товара почти всегда article, список статей — внутри main. Селектор article.product_pod переживает редизайн чаще, чем div.row > div:nth-child(3), потому что смысл карточки не меняется вместе с сеткой раскладки. Микроразметка itemprop, как в разметке цитаты выше, — ещё один слой стабильности: сайты несут её для поисковиков и редко ломают. Приоритет простой: data-атрибуты и семантика, потом осмысленные классы, и только потом геометрия страницы.

Рабочий цикл скрапера начинается в браузере. Правый клик по нужному элементу на странице — «Просмотреть код» — и вкладка Elements разворачивается на том самом узле. Дальше три вопроса: что это за тег, какие у него классы и атрибуты, и что вокруг — в каком контейнере он лежит. Контейнер важнее всего: селектор, построенный от контейнера цитаты, точнее, чем селектор, построенный от самого текста. В контекстном меню узла есть Copy selector — и им стоит пользоваться с оговоркой: devtools часто выдаёт абсолютный путь вида body > div.container > div.row > div.col-md-8 > div.quote:nth-child(4) > span.text — с номерами детей, которые переломаются, как только на странице станет на одну цитату больше или меньше. Такой вариант берут как сырьё: сокращают до повторяющейся части div.quote span.text и проверяют поиском по документу, сколько узлов ловится. Самая эффективная привычка — искать по классу в поиске devtools: Ctrl+F внутри Elements показывает все совпадения и сразу даёт понять, уникален ли селектор.

Разметка прочитана, зацепки найдены — пора превращать их в запросы. Следующий урок — CSS-селекторы в colly: от простых тегов и классов до комбинаций, атрибутных условий и псевдоклассов. А после него — пятый, про механику колбэков OnHTML: что именно colly делает с найденными узлами и как не намолотить дубликатов. Если захочется освежить, зачем всё это нужно и где границы темы, — вернитесь к знакомству с Colly.