Знаете ли вы, какой селектор правильно использовать при веб-скреппинге? В последнее десятилетие веб-скрепинг стал довольно популярным способом извлечения данных из интернета. Он помогает компаниям получать и анализировать данные для принятия более эффективных бизнес-решений. Благодаря автоматизированным технологиям веб-скреппинг никогда не был таким простым, как сейчас.
Однако, независимо от выбранного инструмента или фреймворка, вы должны принять важное решение, чтобы обеспечить вежливое извлечение данных скребком. А именно: извлекать ли веб-элементы с помощью XPath или CSS-селекторов, о чем вы узнаете в этой статье.
Давайте рассмотрим несколько существующих примеров.
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, так как мы будем работать с этим примером именно в нем).
Подробнее о DOM вы можете прочитать по указанной ссылке. Теперь наше внимание сосредоточено на XPath, как перейти к каждому из этих элементов сразу, не обходя все дерево. Итак, давайте начнем с базовой терминологии Xpath.
В XPath самым основным элементом является узел. Узлы - это просто отдельные элементы, которые вы только что видели в дереве DOM. По мере продвижения в этой статье вы узнаете, что узлы состоят из элементов тегов, атрибутов, значений строк, присвоенных им, и так далее. В каждой XML- или 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]Шаг 1 => li[1] //Здесь один обозначает первый элемент li
Шаг 2 => /li[1]
Шаг 3 => ul/li[1]
Шаг 4 => /ul/li[1]
Шаг 5 => body/ul/li[1]
Шаг 6 => /body/ul/li[1]
Шаг 7 => html/body/ul/li[1]
Шаг 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 можно не беспокоиться о том, что вы не знаете названия элемента, поскольку вы можете использовать функцию contains для поиска вероятных совпадений. Таким образом, вы можете подниматься вверх по DOM при запросе элементов для поиска.
Еще одно существенное преимущество CSS заключается в том, что он работает в старых устаревших браузерах, таких как устаревшие версии Internet Explorer.
Как вы уже узнали выше, его самый существенный недостаток в том, что его легче сломать, когда вы меняете элементы в пути. Он может быть сложнее для понимания, чем селекторы CSS, о которых вы узнаете ниже.
Кроме того, при извлечении элементов из XPath его производительность значительно ниже, чем у CSS.
Как вы уже знаете, CSS расшифровывается как каскадные таблицы стилей, которые используются для стилизации HTML-элементов на веб-странице. Эти стили включают в себя применение цветов для шрифта, фоновых изображений и цветов, выравнивание и позиционирование элементов, а также увеличение/уменьшение пробелов между абзацами.
Чтобы задать стиль элементу HTML, необходимо указать его с помощью селектора CSS. Давайте рассмотрим простой пример, начиная с разметки в следующем разделе.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Вот селектор CSS для вышеуказанного элемента:
Вы можете комбинировать их:
Оператор > используется для выбора детей. Напротив, оператор + выбирает первого брата или сестру, а оператор ~ используется для выбора всех братьев или сестер. Ниже приведены несколько примеров:
Даже если исключить из уравнения старые версии Internet Explorer, все равно могут возникнуть несоответствия в их отображении в разных браузерах.
Поскольку существуют различные версии CSS, они могут вызвать путаницу как у разработчиков, так и у новичков.
Еще одним важным фактором в современных веб-технологиях является безопасность CSS.
Очевидное различие между XPath и CSS заключается в том, что XPath является двунаправленным. Это означает, что вы можете перемещаться по дереву DOM в обоих направлениях. Однако в CSS вы можете перемещаться только от родительского узла к дочерним узлам, что называется однонаправленным потоком.
Как уже говорилось в предыдущих разделах, XPath сложнее поддерживать и он не является хорошим кандидатом на эффективную читабельность. С другой стороны, хотя XPath может работать в устаревших браузерах, способ его отображения в разных браузерах отличается.
Поэтому в этом отношении у CSS есть преимущество.
XPATH стоит особняком, поскольку CSS может переходить от родительских элементов к дочерним только в определенных областях, например, при переходе по дереву DOM. Что касается скорости, то здесь у CSS есть преимущество.
Однако разница в скорости между XPath и CSS не имеет большого значения, когда речь идет о веб-скреппинге. Есть и другие факторы, которые необходимо учитывать, например, сетевая задержка при веб-скреппинге.
CSS будет вашим первым выбором, когда дело дойдет до Beautiful Soup, поскольку он не поддерживает XPath.
Не существует точного ответа на вопрос, какие селекторы использовать для проекта веб-скреппинга. Как вы узнали из этой статьи, в некоторых ситуациях преимущество имеет XPath, а в других - CSS.
Поэтому необходимо учитывать такие важные моменты, как обход, поддержка браузера и некоторые технические возможности, о которых мы говорили. Мы надеемся, что вы будете применять полученные знания на практике, и следите за новыми статьями.