За более чем 10 лет работы специалистом по парсингу веб-страниц лишь немногие вопросы возникали так часто, как «Должен ли я использовать селекторы XPath или CSS?»
Хотя единого правильного ответа не существует, понимание ключевых различий между этими двумя технологиями выбора элементов может помочь вам стать более информированным специалистом.
В этом подробном руководстве я расскажу все, что вам нужно знать о XPath и CSS с точки зрения парсинга веб-страниц:
- Происхождение и эволюция
- Синтаксис и структура запроса
- Возможности и ограничения
- Соображения производительности
- Поддержка браузеров и стандарты
- Поддержка инструментов и библиотек
Моя цель — предоставить вам необходимую информацию как разработчику, так и парсеру, чтобы определить, когда использовать XPath или CSS для той или иной задачи веб-извлечения.
Готовый? Давайте погрузимся.
Краткая история
XPath возник как язык запросов для XML-документов, а CSS был разработан для стилизации веб-страниц.
Но со временем они превратились в мощные инструменты выбора элементов для автоматизации и очистки данных.
Расцвет XPath
Когда в 1990-х годах XML набирал популярность, разработчикам требовался стандартный способ определения узлов в сложных документах.
XPath был создан в 1999 году для удовлетворения этой потребности.
W3C принял XPath в качестве ключевого компонента XSLT и XQuery. А другое программное обеспечение, такое как Selenium и Scrapy, интегрировало поддержку XPath для поиска элементов HTML на отображаемых веб-страницах.
Моделируя DOM в виде дерева, XPath обеспечил надежные возможности обхода вверх, вниз и между ветвями.
CSS-селекторы становятся повсеместными
CSS был разработан как язык стилей и включал в себя базовые селекторы, такие как тип, идентификатор и класс.
Когда в 1990-х годах CSS стал неотъемлемой частью веб-разработки, браузеры вложили значительные средства в оптимизацию механизмов CSS.
Эта производительность в сочетании с повсеместностью сделала селекторы CSS привлекательными и для нужд веб-скрапинга.
Библиотеки парсинга, такие как Beautiful Soup, использовали селекторы CSS в качестве стратегии быстрого поиска.
Таким образом, в то время как XPath был ориентирован на документы XML/HTML в целом, CSS фокусировался на стилизации видимых элементов пользовательского интерфейса.
Сравнение синтаксиса XPath и CSS
Давайте раскроем синтаксис XPath и CSS на нескольких примерах.
Рассмотрим эту простую страницу:
<html>
<body>
<div>
<h2>Hello World</h2>
<p>This is a page</p>
</div>
<ul>
<li class="highlight"><span>List item 1</span></li>
<li>List item 2</li>
</ul>
</body>
</html>Синтаксис XPath
DOM рассматривается как дерево узлов. XPath использует выражения пути для перемещения между узлами:
/html/body- Выберите<body>элемент//li[1]– Выбери сначала<li>//h2/text()– Получить текст внутри<h2>//span/ancestor::ul- Подняться на<ul>родителя
Некоторые заметные вещи:
- Иерархическая структура на основе позиций DOM
- «//» для глобального поиска; "/" для прямых дочерних элементов
[ ]для предикатов и функций типаposition()
Синтаксис селектора CSS
CSS использует простой синтаксис сопоставления с образцом для целевых элементов:
body- Выбрать<body>день.highlight– Выбор по названию классаul > li- Соответствовать<li>внутри<ul>h2 + p– Соседний одноуровневый комбинатор
наблюдения:
- Плоские, неиерархические шаблоны
- Специальные символы, такие как
>,+определить отношения - Нет возможности пройти вверх по дереву
Итак, XPath ориентирован на структурированные запросы к документам, а CSS обеспечивает простое сопоставление подстрок.
Сравнение функций XPath и CSS
Изучив основы, давайте сравним некоторые ключевые моменты дифференциации:
Обход DOM
- XPath может перемещаться как вверх, так и вниз.
- Селекторы CSS допускают только обход вниз
Это делает XPath более гибким.
читабельность
- Селекторы CSS, как правило, более читабельны и лаконичны.
- Длинные строки XPath могут стать сложными
Таким образом, для более простых запросов CSS имеет преимущество.
Перфоманс
- Селекторы CSS часто работают быстрее из-за оптимизации браузера.
- Но для сложных страниц разрыв сокращается.
В большинстве случаев скорость сопоставима.
Частичное совпадение
- XPath поддерживает
contains()для частичного текстового поиска - В CSS отсутствует встроенная поддержка, некоторые псевдоклассы работают только с точными совпадениями.
Здесь XPath имеет лучшую функциональность.
Языковая поддержка
- XPath может запрашивать как XML, так и HTML.
- CSS работает только с HTML/DOM.
XPath полезен для обоих форматов данных.
Что использовать при скрапинге?
Основываясь на их возможностях, вот несколько рекомендаций о том, когда использовать по умолчанию XPath или CSS:
Предпочитайте XPath, когда вам нужно:
- Перейдите вверх по дереву DOM
- Частичный поиск текстовых значений
- Запрос XML (не только HTML)
- Используйте расширенную условную логику
Предпочитайте CSS-селекторы, если хотите:
- Пишите короткие и простые запросы
- Используйте оптимизацию браузера
- Поддержка таких библиотек, как Beautiful Soup
- Найдите видимые элементы пользовательского интерфейса
Но жестких правил нет – опыт подскажет вам, когда тот или иной вариант подойдет лучше.
Часто использование обоих вместе является оптимальным подходом.
Поддержка браузеров и стандарты
Все современные браузеры имеют полную поддержку XPath и CSS:
| Особенность | Chrome | Firefox | Safari |
|---|---|---|---|
| XPath | Да | Да | Да |
| Селекторы CSS | Да | Да | Да |
И оба они являются веб-стандартами:
- XPath — это рекомендация W3C.
- CSS стандартизирован W3C.
Таким образом, вы можете рассчитывать на отличную кроссбраузерную поддержку обеих технологий.
Заключение и основные выводы
Выбор между XPath и CSS зависит скорее от их возможностей, чем от производительности.
Я рекомендую свободно владеть обоими и позволить варианту использования определять ваш выбор.
Для простого поиска элементов отдавайте предпочтение CSS для удобства чтения.
Если вам нужен надежный обход DOM или частичное сопоставление, используйте XPath.
Если возможно, используйте XPath и CSS вместе, чтобы извлечь выгоду из их объединенной мощи.
Имея опыт извлечения данных из Интернета, вы естественным образом поймете, когда лучше всего использовать селекторы XPath и CSS.
Я надеюсь, что это руководство предоставило исчерпывающий обзор их основных сильных сторон, различий и приложений для ваших нужд в парсинге веб-страниц.
Приятного извлечения!
