Выбор правильного селектора для веб-скрапинга: CSS или XPath
Знаете ли вы, какой селектор правильно использовать при веб-скреппинге? В последнее десятилетие веб-скрепинг стал довольно популярным способом извлечения данных из интернета. Он помогает компаниям получать и анализировать данные для принятия более эффективных бизнес-решений. Благодаря автоматизированным технологиям веб-скреппинг никогда не был таким простым, как сейчас.
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
Однако, независимо от выбранного инструмента или фреймворка, вы должны принять важное решение, чтобы обеспечить вежливое извлечение данных скребком. А именно: извлекать ли веб-элементы с помощью XPath или CSS-селекторов, о чем вы узнаете из этой статьи.
Давайте рассмотрим несколько существующих примеров.
Что такое селектор XPath?
XPath расшифровывается как XML Path Language. Однако в нем используется синтаксис, не относящийся к XML, для выбора тегов или групп тегов из XML-документа или HTML, как при веб-скреппинге. XPath позволяет писать выражения для прямого доступа к элементу HTML или XML без обхода всего дерева HTML.
Чтобы понять, как можно получить доступ к элементу с помощью XPath, давайте углубимся в HTML-код. Я предполагаю, что вы уже знаете некоторые основы HTML.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Вы можете набрать приведенный выше код в выбранном вами редакторе и сохранить его под именем products.html. Затем вы можете просмотреть его в браузере (предпочтительно в Google Chrome, так как мы будем работать с этим примером именно в нем).
Когда браузер запускает этот код, он обрабатывает HTML и создает древовидное представление элементов. Оно известно как DOM (Document Object Model) в следующей форме:
Подробнее о DOM вы можете прочитать по указанной ссылке. Теперь наше внимание сосредоточено на XPath, как перейти к каждому из этих элементов сразу, не обходя все дерево. Итак, давайте начнем с базовой терминологии Xpath.
Что такое узлы?
В XPath самым основным элементом является узел. Узлы - это просто отдельные элементы, которые вы только что видели в дереве DOM. По мере продвижения в этой статье вы узнаете, что узлы состоят из элементов тегов, атрибутов, значений строк, присвоенных им, и так далее. В каждой XML- или HTML-странице их семь, и давайте рассмотрим каждый тип узла подробнее.
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
Хотя три вышеперечисленных пункта являются наиболее значимыми, для информации также важно знать следующие четыре.
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- Комментарии: Это комментарии к HTML или XML-документу, которые компилятор или синтаксический анализатор не обрабатывает.
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
Каковы взаимоотношения между узлами?
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
Как найти XPath элемента HTML?
Сделать это можно двумя способами. Во-первых, продемонстрировать это или написать пример. Как я уже говорил выше, надеюсь, вы сохранили его на локальном диске и он готов к просмотру в браузере.
Когда страница загрузится, наведите курсор на элемент 1 и щелкните на нем правой кнопкой мыши. Затем выберите пункт Inspect из появившегося меню, как показано на скриншоте ниже:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Затем, вставив его в текстовый файл или куда-нибудь еще, вы получите:
/html/body/ul/li[1]
Этот путь называется абсолютным. Ниже я объясню, как его получить.
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
Абсолютный путь
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Хотя приведенный выше метод кажется длинным, он поможет вам понять, как построить полный XPath. Теперь перейдем к относительному методу.
Относительный путь
//*[@id="product-list"]/li[1]
As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
Разница между относительными и абсолютными путями
Существенные отличия заключаются в том, что полный XPath не читается и его трудно поддерживать. Другая очевидная проблема заключается в том, что при изменении любого элемента, начиная с корневого, абсолютный XPath будет недействителен. Поэтому имеет смысл использовать относительный XPath.
Однако прежде чем говорить об этом, давайте рассмотрим преимущества и недостатки.
Преимущества и недостатки XPATH
Преимущества
С помощью XPath можно не беспокоиться о том, что вы не знаете названия элемента, поскольку вы можете использовать функцию contains для поиска вероятных совпадений. Таким образом, вы можете подниматься вверх по DOM при запросе элементов для поиска.
Еще одно существенное преимущество CSS заключается в том, что он работает в старых устаревших браузерах, таких как устаревшие версии Internet Explorer.
Недостатки
Как вы уже узнали выше, его самый существенный недостаток в том, что его легче сломать, когда вы меняете элементы в пути. Он может быть сложнее для понимания, чем селекторы CSS, о которых вы узнаете ниже.
Кроме того, при извлечении элементов из XPath его производительность значительно ниже, чем у CSS.
Что такое селектор CSS?
Как вы уже знаете, CSS расшифровывается как каскадные таблицы стилей, которые используются для стилизации HTML-элементов на веб-странице. Эти стили включают в себя применение цветов для шрифта, фоновых изображений и цветов, выравнивание и позиционирование элементов, а также увеличение/уменьшение пробелов между абзацами.
Чтобы задать стиль элементу HTML, необходимо указать его с помощью селектора CSS. Давайте рассмотрим простой пример, начиная с разметки в следующем разделе.
Как создаются селекторы CSS?
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>
Вот селектор CSS для вышеуказанного элемента:
- <h1>-selects by the element name <h1>
- #main-heading - #указывает идентификатор элемента
- .header-styles - Точка обозначает имя класса.
- [name="h1name"] - Вы можете указать атрибуты в квадратных скобках.
Вы можете комбинировать их:
h1.header-styles - этот CSS-селектор выбирает элементы h1 с классом header-styles.
Расширенные селекторы
Оператор > используется для выбора детей. Напротив, оператор + выбирает первого брата или сестру, а оператор ~ используется для выбора всех братьев или сестер. Ниже приведены несколько примеров:
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
Преимущества и недостатки использования селекторов CSS
Преимущества
В отличие от XPath, который Beautiful Soup не поддерживает, CSS-селекторы поддерживаются самыми эффективными библиотеками для скраппинга. Кроме того, в отличие от XPath, селекторы CSS легче изучать и поддерживать. Почти все браузеры поддерживают их, за исключением устаревших браузеров ниже Internet Explorer версии 8. Однако в наше время люди редко используют эти браузеры.
Недостатки
Даже если исключить из уравнения старые версии Internet Explorer, все равно могут возникнуть несоответствия в их отображении в разных браузерах.
Поскольку существуют различные версии CSS, они могут вызвать путаницу как у разработчиков, так и у новичков.
Еще одним важным фактором в современных веб-технологиях является безопасность CSS.
В чем разница между селекторами CSS и XPath?
Очевидное различие между XPath и CSS заключается в том, что XPath является двунаправленным. Это означает, что вы можете перемещаться по дереву DOM в обоих направлениях. Однако в CSS вы можете перемещаться только от родительского узла к дочерним узлам, что называется однонаправленным потоком.
Как уже говорилось в предыдущих разделах, XPath сложнее поддерживать и он не является хорошим кандидатом на эффективную читабельность. С другой стороны, хотя XPath может работать в устаревших браузерах, способ его отображения в разных браузерах отличается.
Поэтому в этом отношении у CSS есть преимущество.
Что выбрать из этих двух вариантов?
XPATH стоит особняком, поскольку CSS может переходить от родительских элементов к дочерним только в определенных областях, например, при переходе по дереву DOM. Что касается скорости, то здесь у CSS есть преимущество.
Однако разница в скорости между XPath и CSS не имеет большого значения, когда речь идет о веб-скреппинге. Есть и другие факторы, которые необходимо учитывать, например, сетевая задержка при веб-скреппинге.
CSS будет вашим первым выбором, когда дело дойдет до Beautiful Soup, поскольку он не поддерживает XPath.
Заключение
Не существует точного ответа на вопрос, какие селекторы использовать для проекта веб-скреппинга. Как вы узнали из этой статьи, в некоторых ситуациях преимущество имеет XPath, а в других - CSS.
Поэтому необходимо учитывать такие важные моменты, как обход, поддержка браузера и некоторые технические возможности, о которых мы говорили. Мы надеемся, что вы будете применять полученные знания на практике, и следите за новыми статьями.