XPath et les sélecteurs CSS
Mihai Maxim le 25 avril 2023
XPath vs CSS
En tant qu'adepte du web scraping, vous avez probablement rencontré les termes XPath et sélecteurs CSS. Il s'agit de deux méthodes populaires pour naviguer et extraire des éléments d'un document HTML ou XML, mais qu'est-ce que c'est exactement et en quoi diffèrent-ils ? Dans cet article, je vais vous présenter une comparaison côte à côte des sélecteurs XPath et CSS, en discutant de leurs caractéristiques et de leurs cas d'utilisation.
Nous commencerons par une brève présentation de XPath et des sélecteurs CSS, et nous utiliserons des exemples pour montrer comment ils peuvent être utilisés pour naviguer et extraire des éléments d'un document HTML. Nous explorerons les différences de syntaxe et de possibilités, et nous examinerons les diverses fonctions intégrées offertes par XPath, ainsi que la manière d'obtenir les mêmes résultats à l'aide de CSS et de JavaScript. Nous discuterons également des avantages et des inconvénients de chaque méthode et de la manière de décider laquelle utiliser pour votre projet.
Alors, prenez un cahier, taillez votre crayon et préparez-vous à plonger dans le monde de XPath et des sélecteurs CSS !
Aperçu des sélecteurs
XPath, abréviation de XML Path Language, est un langage de requête utilisé pour naviguer dans un document XML. Il a été introduit pour la première fois en 1999 afin de fournir un moyen standard d'accéder aux éléments d'un document XML. Le langage s'articule autour du concept de "chemin", qui permet de sélectionner des éléments spécifiques en fonction de leur position dans le document.
L'une des principales caractéristiques de XPath est l'utilisation de la notation de chemin. Cette notation vous permet de sélectionner des éléments en fonction de leur emplacement dans l'arborescence du document. Par exemple, dans un document HTML, le chemin "html/body/p" sélectionnerait tous les éléments p qui sont des enfants directs de l'élément body, qui est lui-même un enfant direct de l'élément html.
La syntaxe de XPath est assez simple :
//tagname[@attribute='value']
Où "tagname" est le type d'élément HTML que vous recherchez (par exemple div, a, p), "attribute" est une propriété de l'élément HTML souhaité par laquelle notre localisateur effectue la recherche (par exemple class) et "value" est la valeur spécifique que vous voulez faire correspondre.
Les sélecteurs CSS, abréviation de Cascading Style Sheets (feuilles de style en cascade), sont utilisés pour sélectionner des éléments en fonction de leurs propriétés, telles que la classe, l'identifiant et les attributs. Ils sont plus faciles à lire et à comprendre que XPath, mais leur capacité à naviguer dans le document est limitée. Les sélecteurs CSS sont principalement utilisés pour le style et la mise en page, mais vous pouvez également les utiliser pour extraire des informations d'une page web :
<html> <body> <p class="highlight">Hello, world!</p> </body> </html>
|
Pour sélectionner le texte "Hello, world !" à l'aide des sélecteurs CSS, nous devons utiliser Javascript :
let p_tag = document.querySelector("p.highlight")
let p_text = p_tag.innerTextXPath, quant à lui, a été spécifiquement conçu pour fournir un langage d'interrogation pour les documents XML et s'accompagne d'un large éventail de fonctions intégrées. Ces fonctions peuvent être utilisées pour effectuer des calculs et extraire des informations spécifiques des éléments. Par exemple, la fonction text() de XPath permet de sélectionner directement la valeur textuelle d'un élément :
<html> <body> <p>Hello, world!</p> </body> </html>
Pour sélectionner le texte "Hello, world !" en utilisant la fonction text() dans XPath, l'expression serait :
/html/body/p/text()
Ressources complémentaires
Si vous souhaitez approfondir le monde de XPath et des sélecteurs CSS, nous avons quelques articles qui peuvent vous aider. Ce premier article couvre les bases des sélecteurs XPath, y compris la syntaxe, les fonctions et la façon de naviguer dans l'arbre DOM. Le second article aborde les bases des sélecteurs CSS, y compris les différents types de sélecteurs.
Mise en place d'un exemple
Afin d'illustrer clairement les principales différences entre les sélecteurs XPath et CSS, analysons une structure HTML fictive :
<!doctype html>
<html>
<head>
<title>Top News</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Top News Stories</h1>
<div class="container">
<div class="news-story">
<h2> <a href="https://edition.cnn.com/2022/12/28/weather/buffalo-winter-storm-new-york-blizzard-wednesday/index.html">Winter Storm</a> </h2>
<p>Winter storm death toll rises to 37 in Buffalo as criticism arises over handling of storm and cleanup</p>
</div>
<div class="news-story">
<h2> <a href="https://www.nbcnews.com/politics/politics-news/spacex-leader-reassured-nasa-chief-elson-musk-rcna61189">SpaceX</a> </h2>
<p>NASA chief: SpaceX leader says Elon Musk’s Twitter drama is ‘nothing to worry about’.</p>
</div>
</div>
</body>
</html>
Test des sélecteurs dans les outils de développement
Tester les sélecteurs XPath et CSS dans les outils de développement est un moyen rapide et facile de vérifier que vos sélecteurs fonctionnent correctement. Le processus est similaire dans la plupart des navigateurs modernes, mais pour les besoins de cet exemple, nous utiliserons Google Chrome.
Pour commencer, ouvrez la page web sur laquelle vous souhaitez tester vos sélecteurs dans Google Chrome. Ensuite, cliquez avec le bouton droit de la souris sur un élément que vous souhaitez sélectionner et choisissez "Inspecter" dans le menu contextuel. La fenêtre des outils de développement s'ouvre alors :
Dans la fenêtre des outils de développement, vous verrez le code source HTML de la page web sur le côté gauche et la page web rendue correspondante sur le côté droit.
Pour trouver le sélecteur XPath et CSS complet d'un élément, cliquez avec le bouton droit de la souris sur l'élément dans le code HTML et sélectionnez "Copier > Copier le XPath complet" ou "Copier > Copier le sélecteur". Cette opération permet de copier le chemin d'accès complet à l'élément, y compris tous les éléments parents, dans votre presse-papiers. Vous pouvez ensuite coller ce chemin dans votre code ou dans la barre de recherche des outils de développement (ctrl+f) pour accéder à l'élément.
Par exemple, si vous souhaitez sélectionner toutes les balises h2 de l'exemple html fourni ci-dessus, vous devez taper "//h2" dans la barre de recherche et appuyer sur la touche Entrée.
Les principaux enseignements
L'une des principales différences entre XPath et CSS est que XPath peut sélectionner des éléments en fonction de leur position dans le document. Les sélecteurs CSS sont limités à la sélection d'éléments sur la base de leurs propriétés.
Par exemple, dans XPath, nous pouvons sélectionner le deuxième élément div avec la classe news-story en utilisant l'expression //div[@class='news-story'][2]. Avec les sélecteurs CSS, nous ne pouvons le sélectionner qu'en utilisant div.news-story:nth-child(2).
div.news-story:nth-child(2) sélectionnera le deuxième élément div parmi tous les éléments div qui ont la classe "news-story" et sont des enfants du même élément conteneur.
//div[@class='news-story'][2] permet de sélectionner l'élément en fonction de sa position dans l'ensemble du document. L'élément ne doit pas nécessairement être l'enfant d'un élément conteneur spécifique :
<html>
<body>
<div class="container">
<div class="news-story">
<h2>News Story 1</h2>
</div>
</div>
<div class="container">
<div class="news-story">
<h2>News Story 2</h2>
</div>
</div>
</body>
</html>
Pour cet exemple précis, div[@class='news-story'][2] sélectionne le deuxième article.
div.news-story:nth-child(2) ne sélectionne rien puisque chaque élément conteneur n'a qu'un seul enfant direct.
Une plus grande flexibilité
XPath permet une plus grande flexibilité dans la navigation dans l'arbre DOM. Il permet de se déplacer vers le haut et vers le bas de l'arbre. Les sélecteurs CSS ne permettent de naviguer que vers le bas. XPath est donc plus puissant et plus polyvalent, mais aussi plus complexe.
Avec XPath, vous pouvez utiliser des axes tels que les axes parent et ancêtre pour accéder au parent ou à l'ancêtre d'un élément, ce qui n'est pas possible avec les sélecteurs CSS.
Par exemple, l'expression XPath //div[@class='news-story'][1]/parent::*//h2 sélectionne le premier élément div avec la classe "news-story". Elle navigue ensuite vers son élément parent à l'aide de l'opérateur parent::*, puis sélectionne l'élément h2 à l'intérieur de cet élément parent.
Vous pouvez également utiliser des crochets pour sélectionner l'élément parent du premier élément div avec la classe "news-story", puis sélectionner l'élément h2 à l'intérieur de cet élément parent en utilisant //div[@class='news-story'][1]/..//h2.
Fonctions intégrées
Une autre différence importante entre XPath et les sélecteurs CSS est que XPath dispose d'un large éventail de fonctions intégrées, telles que count(), sum(), string(), substring() et contains(). Ces fonctions peuvent être utilisées pour manipuler des éléments et extraire des données.
count() peut être utilisé pour compter le nombre d'éléments qui correspondent à certains critères. Par exemple, pour compter le nombre d'éléments div avec la classe news-story, nous pouvons utiliser l'expression XPath count(//div[@class='news-story']).
L'équivalent en CSS et JavaScript serait :
document.querySelectorAll('div.news-story').lengthsum() peut être utilisée pour calculer la somme d'une certaine valeur pour un ensemble d'éléments répondant à certains critères. Par exemple, pour calculer le nombre total de caractères dans le contenu textuel de tous les éléments p, nous pouvons utiliser l'expression XPath sum(//p/text()/string-length()).
Les contreparties CSS et JavaScript seraient :
var sum = 0;
var elements = document.querySelectorAll('p');
elements.forEach(function(element) {
sum += element.innerText.length;
});
console.log(sum);
substring() peut être utilisé pour extraire une sous-chaîne d'une chaîne. Par exemple, pour extraire le deuxième au cinquième caractère du contenu textuel d'un certain élément, nous pouvons utiliser l'expression XPath substring(//p/text(), 2, 5).
Les homologues CSS et JavaScript :
document.querySelector('p').innerText.substring(2, 5)contains() peut être utilisée pour vérifier si une chaîne contient une certaine sous-chaîne. Par exemple, pour vérifier si le contenu textuel d'un certain élément p contient le mot "Hiver", nous pouvons utiliser l'expression XPath //p[contains(text(), "Winter")]
Avantages des sélecteurs CSS
Les sélecteurs CSS présentent plusieurs avantages par rapport à XPath, ce qui en fait un excellent choix pour certains projets. L'un des principaux avantages des sélecteurs CSS est leur simplicité et leur lisibilité. Contrairement à XPath, qui peut être complexe et difficile à lire, les sélecteurs CSS sont faciles à comprendre et à utiliser.
Un autre avantage des sélecteurs CSS est leur performance. Comme les sélecteurs CSS ne naviguent que vers le bas de l'arbre DOM, ils sont généralement plus rapides que XPath, qui peut naviguer vers le haut et vers le bas de l'arbre.
Enfin, les sélecteurs CSS sont également plus largement utilisés dans le développement web. Cela signifie que les développeurs web sont plus susceptibles de les connaître et d'être plus enclins à vous aider dans vos projets.
Conclusion
En résumé, XPath et les sélecteurs CSS sont tous deux des outils puissants qui vous permettent de naviguer et d'extraire des éléments d'un document HTML. XPath est puissant et flexible mais peut être difficile à lire, tandis que les sélecteurs CSS sont plus faciles à lire mais sont limités dans leur capacité à naviguer dans le document.
Lorsque vous choisissez entre XPath et les sélecteurs CSS, tenez compte de la structure du document et des informations que vous souhaitez extraire. Si vous cherchez à extraire des données sur la base de la position des éléments, XPath est le meilleur choix. En revanche, si vous cherchez à extraire des données basées sur des propriétés telles que la classe ou l'identifiant, les sélecteurs CSS constituent une meilleure option.
Si vous souhaitez en savoir plus sur la manière dont le web scraping peut aider votre entreprise, je vous invite à nous contacter à WebScrapingAPI. Nous sommes plus qu'heureux de répondre à toutes vos questions !
Nouvelles et mises à jour
Restez au courant des derniers guides et nouvelles sur le web scraping en vous inscrivant à notre lettre d'information.
We care about the protection of your data. Read our <l>Privacy Policy</l>.Privacy Policy.
Articles connexes
Explorez le pouvoir de transformation du web scraping dans le secteur financier. Des données sur les produits à l'analyse des sentiments, ce guide donne un aperçu des différents types de données web disponibles pour les décisions d'investissement.
Plongez dans le rôle transformateur des données financières dans la prise de décision des entreprises. Comprendre les données financières traditionnelles et l'importance émergente des données alternatives.
Découvrez comment extraire et organiser efficacement des données pour le web scraping et l'analyse de données grâce à l'analyse de données, aux bibliothèques d'analyse HTML et aux métadonnées schema.org.