Passer au contenu

Comment sélectionner des éléments par classe dans XPath : le guide ultime

Si vous cherchez à extraire des données de sites Web, vous devrez probablement sélectionner des éléments spécifiques en fonction de leurs classes. Les classes constituent un moyen fondamental de catégoriser et de styliser les éléments en HTML. Heureusement, XPath offre des moyens puissants de sélectionner des éléments par leur attribut de classe.

Dans ce guide détaillé, nous expliquerons exactement comment sélectionner des éléments par classe à l'aide de XPath. Que vous soyez un débutant ou un web scraper expérimenté, à la fin de cet article, vous naviguerez de manière experte dans les documents HTML et ciblerez précisément les éléments dont vous avez besoin. Commençons!

Un récapitulatif rapide sur XPath

Avant de nous plonger dans les sélecteurs de classe, passons brièvement en revue ce qu'est XPath et comment il fonctionne. XPath est un langage de requête utilisé pour naviguer et sélectionner des nœuds dans un document XML ou HTML. Il vous permet d'écrire des expressions qui identifient des éléments spécifiques en fonction de leur nom de balise, de leurs attributs, de leur position, etc.

Voici quelques éléments clés à savoir sur XPath :

  • XPath traite le document comme une structure arborescente, avec un nœud racine et des nœuds enfants qui en dérivent.
  • Les expressions sont évaluées de gauche à droite
  • Les barres obliques (/) sont utilisées pour naviguer entre les nœuds
  • Les éléments peuvent être sélectionnés en fonction de leur nom (par exemple //div sélectionne tout <div> éléments)
  • Les prédicats entre crochets permettent une sélection plus précise (par exemple //div[@id=‘main‘] sélectionne <div> éléments avec un identifiant de "main")

Une fois cette base en place, tournons notre attention vers les classes et comment les exploiter dans les expressions XPath.

Comprendre les classes HTML

Les classes sont un attribut HTML qui vous permet d'attribuer un ou plusieurs noms de classe aux éléments. Ils sont principalement utilisés à des fins de style avec CSS, mais sont également très utiles pour cibler des éléments spécifiques lors du web scraping.

Voici un exemple d'élément de paragraphe avec deux classes :

<p class="highlight text-center">This is some text.</p>

Dans ce cas, le <p> L'élément est doté de deux classes : "highlight" et "text-center". Un élément peut avoir n'importe quel nombre de classes, séparées par des espaces dans la valeur de l'attribut de classe.

Une chose à garder à l’esprit est que les noms de classe sont sensibles à la casse. Donc class="highlight" ainsi que class="Highlight" seraient considérées comme deux classes différentes.

Maintenant que nous comprenons ce que sont les classes HTML, voyons comment sélectionner des éléments en fonction de leurs classes à l'aide de XPath.

Sélection d'éléments par classe dans XPath

XPath propose deux manières principales de sélectionner des éléments par leur attribut de classe :

  1. Utilisation de la fonction contain()
  2. Correspondance exacte du nom de classe

Explorons chacune de ces approches plus en profondeur.

Approche 1 : Utilisation de la fonction contain()

La contains() La fonction vous permet de sélectionner des éléments dont l'attribut de classe contient un nom de classe spécifique. Voici la syntaxe de base :

//element[contains(@class,‘classname‘)]

Par exemple, pour sélectionner tout <div> éléments qui ont une classe de « conteneur », vous utiliseriez :

//div[contains(@class,‘container‘)]  

La contains() la fonction présente quelques caractéristiques clés :

  • Il est sensible à la casse (donc « conteneur » et « conteneur » seraient traités comme différents)
  • Le nom de la classe peut apparaître n'importe où dans la valeur de l'attribut de classe
  • L'élément peut également avoir d'autres classes appliquées, à condition qu'il contienne celle spécifiée

So contains(@class,‘container‘) correspondrait à des éléments tels que :

<div class="container"></div>
<div class="wrapper container card"></div>
<div class="container highlighted"></div>

Mais il serait ne sauraient rencontre:

<div class="containery"></div>
<div class="wrapper"></div>

La contains() L'approche est polyvalente et peut être un bon choix lorsque vous souhaitez faire correspondre des éléments qui ont une certaine classe dans le cadre d'un set de cours. Mais si vous avez besoin d’être plus précis, l’approche suivante peut être préférable.

Approche 2 : correspondance exacte des noms de classe

Pour sélectionner des éléments qui ont un attribut de classe qui exactement correspond à une valeur spécifique, vous pouvez utiliser cette syntaxe :

//element[@class=‘classname‘]

Par exemple, pour sélectionner <p> éléments dont la classe est exactement "highlight", vous utiliseriez :

//p[@class=‘highlight‘]

Cette expression correspondrait à :

<p class="highlight"></p>  

Mais non:

<p class="highlight text-center"></p>
<p class="highlights"></p>
<p class="Highlight"></p>

Comme vous pouvez le constater, l’approche de correspondance exacte est plus stricte. L'attribut de classe doit contenir uniquement le nom de classe spécifié afin de correspondre. Aucune autre classe ne peut être présente et la casse doit correspondre exactement.

Cette approche est utile lorsque vous devez être très précis dans votre sélection d'éléments et que vous souhaitez éviter de faire correspondre accidentellement des éléments qui contiennent la classe dans le cadre d'un ensemble plus vaste.

XPath et classes – Considérations clés

Lorsque vous utilisez XPath pour sélectionner des éléments par classe, il y a quelques points importants à garder à l'esprit :

  • Les noms de classe sont sensibles à la casse. Comme mentionné précédemment, « highlight » et « Highlight » sont traités comme des noms de classe distincts. Assurez-vous que vos expressions XPath correspondent exactement à la casse.

  • Les éléments peuvent avoir plusieurs classes. Il est très courant que plusieurs classes soient appliquées à des éléments, séparées par des espaces. Le contains() l'approche fera correspondre les éléments tant qu'ils contiennent la classe spécifiée quelque part dans leur attribut de classe.

  • La correspondance exacte est plus précise mais moins flexible. Si vous utilisez [@class=‘classname‘], l'attribut class doit uniquement contenir cette classe. Si d'autres classes sont appliquées, l'élément ne sera pas mis en correspondance. En revanche, contains(@class,‘classname‘) correspondra tant que la classe apparaît quelque part dans la valeur de l'attribut.

  • XPath est pris en charge par la plupart des outils et bibliothèques de web scraping. Que vous utilisiez Python avec BeautifulSoup ou Scrapy, JavaScript avec Puppeteer ou Cheerio, ou un autre langage/framework, vous pourrez probablement utiliser des expressions XPath pour extraire des données. La syntaxe de sélection de classe reste la même.

  • La performance est importante pour le grattage à grande échelle. Bien que XPath soit très puissant, il peut également être plus lent que d'autres méthodes telles que les sélecteurs CSS, en particulier pour les expressions plus complexes. Si vous supprimez un grand nombre de pages, il vaut la peine d'évaluer différentes approches pour voir laquelle donne les meilleures performances.

Meilleures pratiques et conseils pour le sélecteur de classe

Pour tirer le meilleur parti des sélecteurs de classes XPath, tenez compte de ces bonnes pratiques et conseils :

  • Utilisez l’expression la plus simple qui fait le travail. Parfois un simple //element[@class=‘classname‘] c'est tout ce dont vous avez besoin. Évitez la complexité inutile.

  • Combinez les sélecteurs de classe avec d’autres critères si nécessaire. Vous pouvez utiliser des prédicats pour sélectionner des éléments en fonction de plusieurs attributs (par exemple //button[@class=‘primary‘ and @type=‘submit‘]), ou combinez des sélecteurs de classe avec des sélecteurs de position (par exemple (//div[@class=‘row‘])[2] pour sélectionner la deuxième ligne).

  • Soyez attentif aux modifications apportées au code HTML du site. Les classes sont souvent utilisées à des fins de style, ce qui signifie qu'elles peuvent changer plus fréquemment que d'autres attributs comme les identifiants. Si votre scraper tombe en panne, vérifiez que les classes que vous ciblez sont toujours présentes sur la page.

  • Utilisez des XPaths relatifs pour éviter de répéter de longues expressions. Si vous avez déjà sélectionné un élément parent, vous pouvez utiliser un point (.) pour sélectionner les enfants par rapport à cet élément, comme //div[@class=‘container‘]/./p.

  • Envisagez d'autres méthodes telles que les sélecteurs CSS ou les expressions régulières pour des cas d'utilisation spécifiques. Bien que XPath soit polyvalent, il peut arriver qu’une autre approche soit plus simple ou plus rapide. Les sélecteurs CSS sont performants et bien adaptés aux tâches de sélection de base. Les expressions régulières peuvent être utiles pour faire correspondre des modèles ou extraire des données à partir d'un contenu textuel.

Exemples de sélection de classe

Passons en revue quelques exemples de sélection de classe en action à l'aide de Python et du lxml bibliothèque.

Supposons que nous ayons ce HTML :

<html>
    <body>
        <div class="container">
            <p class="highlight">Paragraph 1</p>
            <p>Paragraph 2</p>
            <p class="highlight">Paragraph 3</p>
        </div>
    </body>  
</html>

Pour tout sélectionner <p> éléments avec une classe de "highlight", on peut utiliser contains():

from lxml import html

tree = html.fromstring(html_string)
highlighted_paragraphs = tree.xpath(‘//p[contains(@class,"highlight")]‘)

for paragraph in highlighted_paragraphs:
    print(paragraph.text)

# Output: 
# Paragraph 1
# Paragraph 3

Si nous voulions sélectionner uniquement le <p> éléments où se trouve la classe exactement "mettre en évidence", nous utiliserions :

exact_match_paragraphs = tree.xpath(‘//p[@class="highlight"]‘)

Pour sélectionner le <div> élément puis trouvez <p> éléments avec la classe "highlight" à l'intérieur, nous pouvons utiliser un XPath relatif :

div = tree.xpath(‘//div[@class="container"]‘)[0]
highlighted_paragraphs = div.xpath(‘./p[contains(@class,"highlight")]‘)

Rassemblement

Dans ce guide, nous avons examiné en profondeur comment sélectionner des éléments par classe à l'aide de XPath. Nous avons couvert les deux approches principales – en utilisant la fonction contain() et la correspondance exacte du nom de classe – ainsi que les principales considérations, les meilleures pratiques et des exemples.

Pour résumer:

  • XPath est un langage de requête puissant pour sélectionner des éléments dans des documents HTML/XML
  • Les classes sont un moyen d'attribuer des catégories aux éléments, souvent à des fins de style ou de sélection.
  • La contains(@class,‘classname‘) l'approche sélectionne les éléments qui contiennent la classe spécifiée dans le cadre de leur valeur d'attribut de classe
  • La [@class=‘classname‘] l'approche sélectionne les éléments où l'attribut de classe correspond exactement à la classe spécifiée
  • Les sélecteurs de classe XPath sont sensibles à la casse et peuvent être combinés avec d'autres critères ou sélecteurs relatifs
  • Il est important de choisir l'expression la plus simple qui permet d'atteindre votre objectif et d'être attentif aux modifications apportées au code HTML du site au fil du temps.

Fort de ces connaissances, vous êtes bien équipé pour relever une grande variété de défis de web scraping à l'aide de XPath et des sélecteurs de classe. Que vous soyez débutant ou professionnel chevronné, comprendre comment cibler précisément les éléments dont vous avez besoin est une compétence essentielle.

Lorsque vous mettez ces techniques en pratique, n'oubliez pas de toujours être respectueux envers les propriétaires de sites Web et de respecter les conditions d'utilisation applicables ou les fichiers robots.txt. Bon grattage !

Prendre part à la conversation

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *