Навчання XPath з прикладами

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">Текст 1</span>
<span class="FontBold Highlight">Текст 2</span>
<span class="FontItalic">Текст 3</span>

XPath Запит:

Запит: //span[contains(@class, "FontBold")]

Результат: Вибирає всі елементи span, що мають FontBold у атрибуті класу.

Результат:

<span class="FontBold">Текст 1</span>
<span class="FontBold Highlight">Текст 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[@role="admin"][contains(@code, "123")]

Результат:

Атрибути можуть бути довільними і задаватися у будь-якому форматі, тому XPath дозволяє гнучко вибирати елементи на основі будь-яких умов.

Висновок

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

Це навчальний посібник допоможе вам краще зрозуміти і використовувати XPath для вирішення різних завдань. Якщо у вас виникнуть додаткові питання або потрібно буде щось додати, я завжди готовий допомогти!

Приєднуйся зараз

Або зверніться до служби підтримки в чаті з будь-якими питаннями в будь-який час.