Тема | опис |
---|---|
Знайомство з селекторами | Огляд селекторів XPath і CSS. |
Основи XPath | Пояснення синтаксису XPath, виразів і осей. |
Основи селекторів CSS | Розуміння селекторів, комбінаторів і псевдокласів CSS. |
XPath проти селекторів CSS | Порівняння селекторів XPath і CSS, виділення сильних і слабких сторін. |
Практичні приклади | Покрокові приклади використання селекторів XPath і CSS для веб-скрейпінгу. |
Інструменти та ресурси | Рекомендовані інструменти та ресурси для вивчення та використання селекторів XPath і CSS. |
Вступ до селекторів: що таке селектори XPath і CSS?
Селектори XPath і CSS — це потужні інструменти, які використовуються в веб-збиранні для пошуку та вилучення елементів із веб-сторінок. Ці інструменти необхідні для тих, хто хоче автоматизувати процес збору інформації з Інтернету, чи то для досліджень, бізнесу чи особистих проектів.
Основи XPath
Що таке XPath?
XPath або XML Path Language — це мова запитів, яка дозволяє переходити між елементами та атрибутами в документі XML. У контексті веб-скопіювання XPath використовується для пошуку елементів у документах HTML.
Синтаксис і вирази XPath
Вирази XPath використовуються для вибору вузлів із документа XML. Ось кілька основних виразів XPath:
- Абсолютний шлях:
/html/body/div
– Вибирає вседив
елементи, які є дочірніми елементамитіло
елемент. - Відносний шлях:
//div
– Вибирає вседив
елементів у документі, незалежно від їх положення. - Атрибути:
//div[@id='main']
– Вибираєдив
елемент зid
атрибут дорівнює 'main'. - Текстовий вміст:
//div[text()='Hello World']
– Вибираєдив
елемент, що містить текст «Hello World».
Осі XPath
Осі XPath визначають відношення вузлів до поточного вузла. Нижче наведено кілька часто використовуваних осей:
- дитина:
child::div
– Вибирає вседив
дочірні елементи поточного вузла. - Батько:
parent::div
– Вибирає батьківський вузол поточного вузла, якщо це aдив
. - рідний брат:
follow-sibling::div
– Вибирає вседив
братів і сестер після поточного вузла. - Предок:
ancestor::div
– Вибирає вседив
предків поточного вузла.
Основи селекторів CSS
Що таке селектори CSS?
Селектори CSS — це шаблони, які використовуються для вибору елементів на веб-сторінці. Вони в основному використовуються в CSS для стилізації, але їх також можна використовувати в веб-збиранні для визначення місцезнаходження елементів.
Основні селектори CSS
- Селектор типу:
див
– Вибирає вседив
елементів. - Селектор класу:
.назва-класу
– Вибирає всі елементи з класомім'я класу
. - Селектор ID:
#id-name
– Вибирає елемент з ідентифікаторомid-name
. - Селектор атрибутів:
[type='text']
– Вибирає всі елементи з атрибутомтипу
встановити значення "текст".
Комбінатори та псевдокласи
- Комбінатор нащадків:
div p
– Вибирає всестор
елементи всерединідив
елементів. - Дочірній комбінатор:
div > стор
– Вибирає всестор
елементи, які є прямими нащадкамидив
елементів. - Комбінатор сусіднього брата:
div + p
– Вибираєстор
елемент, якому безпосередньо передує aдив
елемент. - Загальний комбінатор братів і сестер:
div ~ стор
– Вибирає всестор
елементи, яким передує aдив
елемент. - Псевдокласи:
a: наведення
– Вибираєa
елементи, коли користувач наводить на них курсор миші.
XPath проти селекторів CSS: який з них використовувати?
І селектори XPath, і CSS мають свої сильні та слабкі сторони, і вибір між ними часто залежить від конкретних вимог завдання.
Сильні сторони XPath
- Потужний: XPath може переходити як вперед, так і назад через DOM, що робить його дуже потужним для складних запитів.
- гнучкий: XPath дозволяє використовувати більш складні вирази та умови, забезпечуючи більшу гнучкість.
Слабкі сторони XPath
- Складність: Синтаксис може бути складнішим і важчим для вивчення початківцям.
- Продуктивність: Запити XPath можуть бути повільнішими порівняно з селекторами CSS, особливо у великих документах.
Сильні сторони селекторів CSS
- Простота: Селектори CSS, як правило, легше читати та писати, що робить їх зручнішими для початківців.
- Продуктивність: Селектори CSS часто працюють швидше, ніж запити XPath, особливо в сучасних браузерах.
Слабкі сторони селекторів CSS
- Обмежена функціональність: селектори CSS менш потужні та гнучкі порівняно з XPath, особливо для складних запитів.
Практичні приклади: використання селекторів XPath і CSS для веб-скрапінгу
Давайте розглянемо кілька практичних прикладів того, як використовувати селектори XPath і CSS для отримання інформації з веб-сторінки.
Приклад 1: Вилучення заголовків із веб-сторінки
Використання XPath:
//h1 | //h2 | //h3
Цей вираз вибирає все h1
, h2
, і h3
елементів.
Використання селекторів CSS:
h1, h2, h3
Цей селектор вибирає все h1
, h2
, і h3
елементів.
Приклад 2: Вилучення посилань із певним класом
Використання XPath:
//a[@class='specific-class']
Цей вираз вибирає все a
елементи з класом конкретний клас
.
Використання селекторів CSS:
a.specific-class
Цей селектор вибирає все a
елементи з класом конкретний клас
.
Приклад 3: Вилучення елементів, що містять певний текст
Використання XPath:
//*[містить(text(),'конкретний текст')]
Цей вираз вибирає всі елементи, що містять текст «конкретний текст».
Використання селекторів CSS (неможливо безпосередньо з CSS, потрібен додатковий JavaScript):
/* Неможливо безпосередньо з CSS */
Інструменти та ресурси: Вивчення та використання селекторів XPath і CSS
Кілька інструментів і ресурсів можуть допомогти вам вивчити й ефективно використовувати селектори XPath і CSS:
- Інструменти розробника браузера: більшість сучасних браузерів мають вбудовані інструменти розробника, які дозволяють перевіряти елементи та тестувати селектори XPath і CSS.
- Онлайн-оцінювачі XPath: Такі веб-сайти, як XPath Tester, дозволяють перевіряти ваші вирази XPath онлайн.
- Інструменти тестування селекторів CSS: такі веб-сайти, як CSS Diner, пропонують інтерактивні ігри, які допоможуть вам вивчити CSS-селектори.
- Документація: Офіційну документацію для селекторів XPath і CSS можна знайти на W3Schools і MDN Web Docs.
Висновок
Оволодіння XPath і селекторами CSS є важливим для всіх, хто займається веб-скопіюванням або автоматизованим вилученням даних. Розуміючи основи цих потужних інструментів, ви зможете точно й ефективно знаходити та витягувати потрібну інформацію з веб-сторінок. Незалежно від того, чи є ви початківцем чи досвідченим скребком, навички, які ви отримаєте від вивчення XPath і селекторів CSS, будуть безцінні у вашому наборі інструментів веб-скрапінгу.