XPath vs CSS
En tant que passionné de web scraping, vous avez probablement déjà entendu parler des sélecteurs XPath et CSS. Il s'agit de deux méthodes courantes pour parcourir et extraire des éléments d'un document HTML ou XML, mais que sont-ils 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 abordant leurs fonctionnalités et leurs cas d'utilisation.
Nous commencerons par un bref aperçu des sélecteurs XPath et CSS, puis 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 capacités, et 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 choisir celle qui convient le mieux à votre projet.
Alors, prenez un cahier, taisez votre crayon et préparez-vous à plonger dans l'univers des sélecteurs XPath et CSS !
Présentation 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 sert à sélectionner des éléments spécifiques en fonction de leur position dans le document.
L'une des principales caractéristiques de XPath est son 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, lequel est lui-même un enfant direct de l'élément html.
La syntaxe de XPath est assez simple :
//tagname[@attribute='value']Où « tagname » correspond au type d'élément HTML que vous recherchez (par exemple div, a, p), « attribute » est une propriété de l'élément HTML souhaité à partir de laquelle notre localisateur effectue la recherche (par exemple class) et « value » est la valeur spécifique que vous souhaitez 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 class, id et les attributs. Ils sont plus faciles à lire et à comprendre que l'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 de sélecteurs CSS, nous devrons utiliser JavaScript :
let p_tag = document.querySelector(“p.highlight”)
let p_text = p_tag.innerTextXPath, en revanche, a été spécialement conçu pour fournir un langage de requête pour les documents XML et dispose 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, avec la fonction text() de XPath, vous pouvez 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 ! » à l'aide de la fonction text() dans XPath, l'expression serait :
/html/body/p/text()Ressources supplémentaires
Si vous souhaitez approfondir vos connaissances sur les sélecteurs XPath et CSS, nous vous proposons deux articles qui pourront vous aider. Le premier article couvre les bases des sélecteurs XPath, notamment la syntaxe, les fonctions et la navigation dans l'arborescence DOM. Le deuxième 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>Tester les 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. Cela ouvrira la fenêtre des outils de développement :
Dans la fenêtre des outils de développement, vous verrez le code source HTML de la page web à gauche et la page web affichée à droite.
Pour trouver le chemin XPath complet et le sélecteur CSS d'un élément, cliquez avec le bouton droit sur l'élément dans le code HTML et sélectionnez « Copier > Copier le chemin XPath complet » ou « Copier > Copier le sélecteur ». Cela copiera le chemin complet vers 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 Entrée.
Les points clés
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 se limitent à la sélection d'éléments en fonction de leurs propriétés.
Par exemple, en XPath, nous pouvons sélectionner le deuxième élément div ayant 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 qui sont des enfants du même élément conteneur.
//div[@class='news-story'][2] vous permet de sélectionner l'élément en fonction de sa position dans l'ensemble du document. L'élément n'a pas besoin d'être 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>Dans 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, car chaque élément conteneur n'a qu'un seul enfant direct.
Une plus grande flexibilité
XPath offre une plus grande flexibilité pour naviguer dans l'arborescence DOM. Il permet notamment de se déplacer vers le haut et vers le bas de l'arborescence. Les sélecteurs CSS ne permettent qu'une navigation vers le bas. Cela rend XPath plus puissant et 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 ayant 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 au sein de cet élément parent.
Vous pouvez également utiliser des crochets pour sélectionner l'élément parent du premier élément div de classe « news-story », puis sélectionner l'élément h2 à l'intérieur de cet élément parent à l'aide de //div[@class='news-story'][1]/..//h2.
Fonctions intégrées
Une autre différence importante entre les sélecteurs XPath et CSS réside dans le fait 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() permet de compter le nombre d'éléments répondant à certains critères. Par exemple, pour compter le nombre d'éléments div ayant la classe news-story, on peut utiliser l'expression XPath count(//div[@class='news-story']).
L'équivalent en CSS et JavaScript serait :
document.querySelectorAll('div.news-story').lengthsum() permet de 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, on peut utiliser l'expression XPath sum(//p/text()/string-length()).
Les équivalents en CSS et JavaScript seraient :
var sum = 0;
var elements = document.querySelectorAll('p');
elements.forEach(function(element) {
sum += element.innerText.length;
});
console.log(sum);substring() permet d'extraire une sous-chaîne d'une chaîne. Par exemple, pour extraire les caractères du deuxième au cinquième du contenu textuel d'un élément donné, on peut utiliser l'expression XPath substring(//p/text(), 2, 5).
Les équivalents en CSS et JavaScript :
document.querySelector('p').innerText.substring(2, 5)contains() permet de vérifier si une chaîne contient une sous-chaîne donnée. Par exemple, pour vérifier si le contenu textuel d'un élément p donné contient le mot « Winter », on peut 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 réside dans leurs performances. Comme les sélecteurs CSS ne parcourent l'arborescence DOM que vers le bas, ils sont généralement plus rapides que l'XPath, qui peut parcourir l'arborescence vers le haut et vers le bas.
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 pourraient être plus disposés à vous aider dans vos projets.
Conclusion
En résumé, les sélecteurs XPath et 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 ont une capacité limitée à naviguer dans le document.
Lorsque vous devez choisir entre les sélecteurs XPath et CSS, tenez compte de la structure du document et des informations que vous souhaitez extraire. Si vous cherchez à extraire des données en fonction de la position des éléments, XPath est le meilleur choix. En revanche, si vous cherchez à extraire des données en fonction de 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 chez WebScrapingAPI. Nous serons ravis de répondre à toutes vos questions !
