CSS Selectors Cheat Sheet - Comment gratter les trucs et astuces du web
Ștefan Răcila le 15 décembre 2022
Avant d'écrire un scraper web, vous devez comprendre les données que vous allez récupérer et comment accéder à ces données. Il existe de nombreuses façons d'accéder aux données d'une page web, la plus courante étant l'utilisation de sélecteurs CSS. Une autre solution consiste à utiliser XPath. Vous pouvez trouver l'aide-mémoire XPath ici.
Introduction au DOM
Lors de l'analyse d'un fichier HTML, le navigateur crée dans sa mémoire une représentation des données qui ressemble à un arbre. Cette représentation est appelée DOM (Document Object Model). Chaque balise HTML est associée à un nœud dans le DOM. Un nœud possède des propriétés telles que le nom, le contenu, les nœuds enfants, les styles, les événements, etc. Vous trouverez plus d'informations sur le fonctionnement du rendu des navigateurs dans cet article Comment fonctionne le rendu des navigateurs - dans les coulisses.
Lorsque nous disons que nous voulons accéder aux données d'une page web, nous voulons seulement itérer à travers le DOM jusqu'à un ensemble spécifique de nœuds et extraire le contenu qu'ils contiennent. Dans cet article, je vais vous donner différentes astuces pour accéder rapidement à ces nœuds en utilisant les sélecteurs CSS.
Que sont les sélecteurs CSS ?
Pourquoi les appelle-t-on sélecteurs CSS (Cascading Style Sheets) ?
CSS est utilisé pour définir l'apparence des nœuds sur une page. Avec CSS, vous pouvez écrire des règles sur l'apparence d'un nœud et sur la manière dont il doit interagir avec d'autres nœuds. Une règle est composée d'un sélecteur et d'une liste de styles à remplacer.
Ces sélecteurs sont donc associés à CSS parce que c'est leur utilisation la plus courante, mais nous n'avons pas besoin de les utiliser uniquement avec CSS. Avec CSS, vous voulez sélectionner un nœud et modifier sa propriété de style. Si vous y réfléchissez, nous voulons faire la même chose : sélectionner un nœud et faire quelque chose avec lui, comme lire son contenu ou déclencher un événement.
Comment fonctionnent les sélecteurs CSS ?
La visualisation de la sélection vous sera d'une grande aide. Disons que vous voulez récupérer tous les paragraphes d'un site web. Vous voulez récupérer tous les noeuds qui ont le nom `p`. Vous pouvez le faire à la main. Il vous suffit d'itérer à travers chaque noeud du DOM et de sélectionner uniquement les noeuds dont node.tagName === 'P' (les noms de tags sont en majuscules).
Voici un petit extrait de code que vous pouvez utiliser :
function scrapeByTagName(node, tagName) {
if (node === null)
return;
node.childNodes.forEach(node => {
//console.log(node.tagName)
if (node.tagName?.toLowerCase() === tagName.toLowerCase()) {
console.log(node)
return
}
scrapeByTagName(node, tagName)
});
}J'ai créé une page web fictive qui ressemble à ceci :
Et voici le code HTML correspondant :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<div id="wrapper">
<h1 custom-attr="some data">Some Title</h1>
<h2 custom-attr="some other data">Some Subtitle</h2>
<div id="container">
<p custom-attr>paragraph
<span> subparagraph</span>
</p>
<p id="text">paragraph with id #text</p>
<p class="bold">paragraph with class .bold</p>
<p class="text">paragraph with class .text</p>
<p class="text bold">paragraph with class .text.bold</p>
<p class="text italic">paragraph with class .text.italic</p>
</div>
</div>
</body>
</html>
Après avoir exécuté la fonction dans la console du navigateur, j'ai obtenu la réponse suivante :
Comme vous pouvez le voir, la fonction a enregistré toutes les balises p.
Pour voir la console du navigateur, vous devez ouvrir devTools et aller dans l'onglet console ou appuyer sur escape. Vous pouvez ouvrir devTools en faisant un clic droit sur un élément et en choisissant inspecter dans le menu ou en utilisant le raccourci clavier control + shift + i.
Comment utiliser les sélecteurs CSS ?
Nous utiliserons deux méthodes : querySelector et querySelectorAll. Ces méthodes apparaissent sur tous les objets de type Element. Les nœuds que nous essayons de récupérer ont le type HTMLElement qui hérite du type Element.
querySelector renvoie le premier nœud correspondant au sélecteur. querySelectorAll renvoie une liste de tous les nœuds correspondant au sélecteur. Pour reproduire l'exemple précédent, il suffit d'appeler querySelectorAll et d'itérer à travers la liste retournée.
document.querySelectorAll('p').forEach(node => console.log(node))
Vous pouvez voir que j'ai utilisé document.querySelectorAllc'est parce que document est défini dans le contexte de la fenêtre comme étant la racine de la page web, c'est-à-dire le correspondant de la balise html. Vous pouvez utiliser les méthodes querySelector avec chaque nœud, et pas seulement avec le nœud racine.
Pour réellement récupérer quelque chose, vous devrez utiliser une bibliothèque qui peut ouvrir une fenêtre de navigateur et aller à une adresse URL. Ce n'est qu'ensuite que votre code s'exécutera, dans le contexte de cette fenêtre. Pour en savoir plus sur la manière de procéder, je vous recommande cet article The Ultimate Guide to Web Scraping with JavaScript and Node.Js.
Chez WebScrapingAPI, nous utilisons Puppeteer. Puppeteer est une bibliothèque qui nous permet de contrôler des instances de navigateurs Chromium sans tête. Vous pouvez utiliser notre API pour extraire des données d'un site web sans construire un scraper personnalisé. Nous disposons d'un paramètre nommé extract_rules qui utilise des sélecteurs CSS pour extraire des données d'une URL donnée.
L'aide-mémoire des sélecteurs CSS
Le sélecteur *
Ce sélecteur spécifie tous les éléments de l'arbre. Il n'est pas très utilisé, mais il est bon de le connaître.
Le sélecteur .class
Vous pouvez obtenir un nœud avec une classe spécifique en utilisant .class. Cette méthode est surtout utilisée lorsqu'il s'agit d'une liste d'éléments. Étant donné que les éléments d'une liste sont susceptibles de se ressembler, ils peuvent avoir la même classe. Cherchons la classe .text.
Vous souhaitez peut-être sélectionner le nœud qui possède la classe .bold.
Il semble qu'il y ait un autre élément qui possède la classe .bold. Vous pouvez être plus précis avec le sélecteur de classe en utilisant plusieurs classes concaténées.
Veuillez noter qu'il n'y a pas de place entre les classes.
document.querySelectorAll('.text .bold').forEach(node => console.log(node))Cette requête ne renvoie rien du code HTML ci-dessus, car elle recherche un élément de classe .text qui a un enfant de classe .bold (pas nécessairement un enfant direct). La requête renvoie l'élément enfant s'il est trouvé.
Le sélecteur #id
Que faire si un élément n'a pas de classe ou si la classe est utilisée trop fréquemment dans le document ? Vous pouvez utiliser l'attribut ID pour obtenir un niveau de spécificité plus élevé. L'inconvénient de l'utilisation du sélecteur id est que, dans la plupart des cas, l'id est unique dans la page HTML et qu'il n'est donc pas possible d'obtenir une liste de nœuds avec cet attribut.
Le sélecteur de nom de nœud
Chaque nœud a un nom. Il s'agit du nom exact de la balise appariée dans le code HTML. Vous pouvez obtenir tous les nœuds qui ont un nom spécifique en utilisant leur nom dans le sélecteur.
Le sélecteur [attribut]
Vous pouvez rencontrer des situations dans lesquelles vous souhaitez sélectionner tous les nœuds qui ont un attribut spécifique.
Vous pouvez également spécifier la valeur de l'attribut.
Ou même ce que la valeur de l'attribut doit contenir. Vous pouvez utiliser le tilde ~ avant le signe égal pour définir que la valeur de l'attribut doit contenir une liste de mots.
Le sélecteur d'attribut sera le plus utilisé si vous décidez de construire un scrapper. Il est très puissant et a beaucoup plus de cas d'utilisation que ce que j'ai montré ici. Vous pouvez trouver plus d'informations sur l'utilisation du sélecteur d'attribut ici W3 Attribute Selectors.
Regroupement de plusieurs sélecteurs
Récupère tous les nœuds p qui ont un identifiant.
Sélectionner tous les nœuds span qui sont enfants d'un nœud p.
Récupère tous les nœuds div qui sont des enfants directs du nœud body.
Obtenir tous les nœuds p qui ont la classe .text
Les possibilités de regroupement de ces sélecteurs sont infinies. Essayez de copier le code HTML ci-dessus et d'y ajouter d'autres nœuds. Essayez ensuite différentes combinaisons de sélecteurs. Si vous souhaitez en savoir plus sur les sélecteurs CSS en général, Mozilla propose un article fantastique qui explique comment les sélecteurs CSS fonctionnent pour le développement web.
Résumé
Si vous voulez apprendre quelque chose de nouveau, je vous conseille d'apprendre d'abord comment cette chose fonctionne. Oui, c'est une étape facultative, mais elle vous donnera des informations que d'autres n'ont pas.
Dans le domaine du développement de logiciels, ces informations vous aideront à trouver la bonne réponse à votre problème/erreur. Vous pouvez prendre le problème en main et même créer une solution personnalisée.
Si vous voulez vraiment comprendre les sélecteurs CSS, vous devez comprendre le DOM. Il s'agit simplement d'un arbre (un graphe acyclique non dirigé connecté) dont les nœuds ont un nom et quelques attributs. C'est tout. Lorsque vous écrivez un sélecteur, vous écrivez simplement une chaîne qui est analysée et utilisée pour interroger le DOM.
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
Apprenez à récupérer des sites web dynamiques en JavaScript à l'aide de Scrapy et de Splash. De l'installation à l'écriture d'un spider, en passant par la gestion de la pagination et des réponses Splash, ce guide complet propose des instructions pas à pas pour les débutants comme pour les experts.
Les sélecteurs XPath sont-ils meilleurs que les sélecteurs CSS pour le web scraping ? Découvrez les points forts et les limites de chaque méthode et faites le bon choix pour votre projet !
Apprenez à scraper des tableaux HTML avec Golang pour une extraction de données puissante. Explorez la structure des tableaux HTML et construisez un scraper web en utilisant la simplicité, la concurrence et la bibliothèque standard robuste de Golang.
