XPath — это мощный язык для поиска и обработки элементов в HTML и XML документах. Он позволяет выбирать элементы на основе атрибутов, классов и других характеристик. В этом руководстве мы рассмотрим основные конструкции XPath, а также несколько практических примеров для лучшего понимания.

Основные конструкции XPath

Выбор элементов по атрибуту class

Пример:

Предположим, у нас есть следующий HTML:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>
<div class="style_disable"></div>

XPath-запрос:

• Запрос: //div[contains(@class, "style_taskCard")]
• Результат: Выбирает все div, у которых в атрибуте class содержится style_taskCard.

Результат:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>

Исключение элементов с определённым классом

Пример:

Теперь, если мы хотим исключить элементы с классом style_disable:

XPath-запрос:

• Запрос: //div[contains(@class, "style_taskCard")][not(contains(@class, "style_disable"))]
• Результат: Выбирает все div, у которых в атрибуте class содержится style_taskCard, но не содержится style_disable.

Результат:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>

Расширенные возможности XPath

Поиск элементов с несколькими условиями

Пример: Рассмотрим следующий HTML:

<div attr-id="1" id="2" class="gena style_box"></div>
<div attr-id="1" id="3" class="gena style_box"></div>
<div attr-id="2" id="2" class="gena style_disable"></div>
<div attr-id="1" id="2" class="style_taskCard style_box"></div>

XPath-запрос:

Запрос: //div[contains(@attr-id, "1")][contains(@id, "2")] Результат: Выбирает все div, у которых attr-id содержит 1, а id содержит 2.

Результат:

<div attr-id="1" id="2" class="gena style_box"></div>
<div attr-id="1" id="2" class="style_taskCard style_box"></div>

Исключение элементов по дополнительному классу

Пример: Теперь мы хотим исключить элементы с классом style_disable, но при этом они должны иметь классы style_taskCard и style_box.

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_active style_box"></div>
<div class="style_taskCard style_active style_disable"></div>
<div class="style_taskCard style_disable"></div>

XPath-запрос:

Запрос: //div[contains(@class, "style_taskCard")][contains(@class, "style_box")][not(contains(@class, "style_disable"))]

Результат: Этот запрос выберет только те элементы, которые содержат оба класса style_taskCard и style_box, но не содержат класс style_disable.

Результат:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_active style_box"></div>

Уточнение по дополнительному классу для активного состояния

Пример:

Представим, что на странице есть элементы с классом style_taskCard, и нам нужно найти только те, которые одновременно имеют классы style_box и style_active.

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_active style_box"></div>
<div class="style_taskCard style_active style_disable"></div>
<div class="style_taskCard style_disable"></div>

XPath-запрос:

Запрос:

//div[contains(@class, "style_taskCard")][contains(@class, "style_box")][contains(@class, "style_active")]

Результат: Этот запрос выберет только те элементы, у которых присутствуют все три класса: style_taskCard, style_box, и style_active.

Результат:

<div class="style_taskCard style_active style_box"></div>

Практические примеры

Работа с атрибутами

Пример:

Предположим, у нас есть следующий HTML:

<span class="FontBold">Text 1</span>
<span class="FontBold Highlight">Text 2</span>
<span class="FontItalic">Text 3</span>

XPath-запрос:

Запрос: //span[contains(@class, "FontBold")]

Результат: Выбирает все span, у которых в атрибуте class содержится FontBold.

Результат:

<span class="FontBold">Text 1</span>
<span class="FontBold Highlight">Text 2</span>

Выбор по специфическому значению атрибута

Пример:

Рассмотрим следующий HTML:

<div data-role="admin"></div>
<div data-role="user"></div>
<div data-role="guest"></div>
<div data-role="admin"></div>

XPath-запрос:

Запрос: //div[@data-role="admin"]

Результат: Выбирает все div, у которых атрибут data-role равен admin.

Результат:

<div data-role="admin"></div>
<div data-role="admin"></div>

В XPath можно работать с любыми атрибутами, не ограничиваясь только стандартными, такими как class или id. Атрибуты могут быть произвольными и содержать любые значения. Вот несколько примеров работы с такими атрибутами:

Пример: Рассмотрим следующий HTML:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div>
<div attr-id="2" attr-name="item2" role="user" code="456"></div>
<div attr-id="3" attr-name="item3" role="guest" code="789"></div>
<div attr-id="4" attr-name="item4" role="admin" code="000"></div>

XPath-запросы:

Выбор по атрибуту attr-id:

//div[@attr-id="1"]

Результат:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div>

Выбор по атрибуту role:

//div[@role="admin"]

Результат:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div>
<div attr-id="4" attr-name="item4" role="admin" code="000"></div>

Выбор по нескольким атрибутам:

//div[@role="admin"][contains(@code, "123")]

Результат:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div>

Атрибуты могут быть произвольными и задаваться в любом формате, поэтому XPath позволяет гибко выбирать элементы на основе любых условий.

Заключение

Эти примеры показывают, как можно использовать XPath для поиска элементов в HTML-документах, включая выбор элементов по атрибутам, исключение элементов и комбинирование условий. Также рассмотрены ситуации, когда необходимо уточнить выбор по дополнительным классам, что делает XPath мощным инструментом для работы с веб-страницами.

Это учебное руководство поможет вам лучше понять и использовать XPath для решения различных задач. Если у вас возникнут дополнительные вопросы или нужно будет добавить что-то ещё, я всегда готов помочь!