Comment utiliser les sélecteurs CSS en C# – QuerySelector, QuerySelectorAll
Les sélecteurs CSS sont utilisés pour sélectionner les éléments HTML que vous souhaitez styliser et appliquer un ensemble de règles CSS. En outre, vous pouvez naviguer dans un document HTML à l’aide de sélecteurs CSS et extraire des informations sur les éléments sélectionnés ou les modifier. Les sélecteurs CSS sont utilisés pour déclarer à quels éléments de balisage un style s’applique, une sorte d’expression de correspondance. L’API Aspose.HTML vous permet de créer un modèle de recherche pour faire correspondre des éléments dans l’arborescence d’un document sur la base de la syntaxe des sélecteurs CSS.
Dans cet article, découvrez comment appliquer efficacement des sélecteurs pour sélectionner les éléments que vous souhaitez styliser en utilisant les méthodes
QuerySelector(selector) et
QuerySelectorAll(selector) de la classe
Document. Ces méthodes vous permettent de récupérer rapidement et facilement des nœuds d’éléments dans le DOM en les faisant correspondre à des sélecteurs. Vous pouvez sélectionner des éléments par leur classe, leur identifiant ou leur nom, ou tout autre sélecteur CSS complexe.
Pour plus d’informations sur la manière d’appliquer efficacement des sélecteurs pour sélectionner les éléments que vous souhaitez styliser, veuillez consulter l’article Sélecteurs CSS. Vous y découvrirez les sélecteurs de base, les sélecteurs combinatoires, les sélecteurs d’attributs, les sélecteurs de groupes et les pseudo-sélecteurs.
Vous pouvez télécharger les exemples complets et les fichiers de données sur GitHub.
QuerySelector() pour naviguer dans le HTML
La méthode QuerySelector() est utilisée pour interroger un élément du DOM qui correspond à un sélecteur CSS. Elle renvoie le premier élément du document qui correspond au sélecteur spécifié. Si aucune correspondance n’est trouvée, null est renvoyé. Dans l’exemple suivant, nous utilisons le sélecteur d’élément CSS pour trouver le premier élément du paragraphe et afficher son contenu sur la console :
Exemple en C#
1// Extract HTML content using CSS selector
2
3// Prepare path to source HTML file
4string documentPath = Path.Combine(DataDir, "queryselector.html");
5
6// Create an instance of an HTML document
7HTMLDocument document = new HTMLDocument(documentPath);
8
9// Here we create a CSS Selector that extracts the first paragraph element
10Element element = document.QuerySelector("p");
11
12// Print content of the first paragraph
13Console.WriteLine(element.InnerHTML);
14// output: The QuerySelector() method returns the first element in the document that matches the specified selector.
15
16// Set style attribute with properties for the selected element
17element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe;");
18
19// Save the HTML document to a file
20document.Save(Path.Combine(OutputDir, "queryselector-p.html"));En outre, dans l’exemple C#, la couleur du texte et la couleur d’arrière-plan ont été modifiées pour l’élément sélectionné. L’exemple de code HTML suivant inclut JavaScript qui utilise la méthode querySelector(“p”) :
JavaScript querySelector()
1<html>
2<head>
3</head>
4 <body>
5 <h1>QuerySelector() Method</h1>
6 <p>The QuerySelector() method returns the first element in the document that matches the specified selector.</p>
7 <p>CSS Selectors are used to declare which of the markup elements a style applies to, a kind of match expression.</p>
8 </body>
9 <script>
10 // Create a CSS Selector that selects the first paragraph element
11 var element = document.querySelector("p");
12
13 // Set style attribute with properties for the selected element
14 element.setAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe");
15 </script>
16</html>QuerySelector() pour styliser l’élément sélectionné
La méthode
QuerySelector() accepte un sélecteur pour déterminer l’élément à renvoyer et renvoie le premier élément correspondant dans le sous-arbre du nœud. Si aucun nœud correspondant n’est trouvé, null est renvoyé. Dans l’exemple C# suivant, la méthode QuerySelector() prend comme paramètre le sélecteur div:last-child qui permet de sélectionner l’élément <div> qui est le dernier enfant de son parent. Remarque : La méthode QuerySelector() renvoie le premier élément qui correspond au sélecteur.
Exemple en C#
1// Select and style HTML element with C# CSS selector
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "css-celector-style.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "nature.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a CSS Selector that selects <div> element that is the last child of its parent
13Element element = document.QuerySelector("div:last-child");
14
15// Set the style attribute with properties for the selected element
16element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe; text-align:center");
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));JavaScript querySelector()
1<script>
2 // Create a CSS Selector that selects <div> element that is the 2-d child of its parent
3 var element = document.querySelector("div:nth-child(2)");
4
5 // Set style attribute with properties for the selected element
6 element.setAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe; text-align:center");
7</script>Examinons le résultat de l’utilisation de la méthode QuerySelector() pour remodeler l’élément <div> qui correspond au sélecteur : a) une image du document HTML original ; b) l’image du document HTML après modification du style.
QuerySelectorAll() pour styliser les éléments sélectionnés
Si vous souhaitez obtenir une liste de tous les éléments qui correspondent aux sélecteurs spécifiés, vous devez utiliser la méthode QuerySelectorAll().
Dans l’exemple suivant, nous utilisons la méthode
QuerySelectorAll() pour naviguer dans un document HTML et rechercher les éléments nécessaires. Cette méthode prend en paramètre le sélecteur de requête et renvoie une NodeList de tous les éléments qui correspondent au sélecteur spécifié. Nous sélectionnons tous les éléments dont l’attribut class est égal à square2 et nous les recolorons :
Exemple en C#
1// Apply background color to elements by class using C#
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "css-selector-color.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "spring.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Here we create a CSS Selector that extracts all elements whose 'class' attribute equals 'square2'
13NodeList elements = document.QuerySelectorAll(".square2");
14
15// Iterate over the resulted list of elements
16foreach (HTMLElement element in elements)
17{
18 // Set the style attribute with new background-color property
19 element.Style.BackgroundColor = "#b0d7fb";
20}
21
22// Save the HTML document to a file
23document.Save(Path.Combine(savePath));JavaScript querySelectorAll()
1<script>
2 // Create a CSS Selector that extracts all elements whose 'class' attribute equals 'square2'
3 var elements = document.querySelectorAll(".square2");
4
5 // Iterate over the resulted list of elements and set style background-color property
6 for(var i = 0; i < elements.length; i++){
7 document.querySelectorAll(".square2")[i].style.backgroundColor = "#b0d7fb";
8 }
9</script>Tous les éléments avec class="square2" ont été recolorés. La figure montre le résultat de l’application de la méthode QuerySelectorAll() (b) au fichier source
spring.html (a) :
Aspose.HTML propose des applications Web HTML gratuites qui constituent une collection en ligne de convertisseurs, de fusions, d’outils SEO, de générateurs de code HTML, d’outils URL, et bien plus encore. Les applications fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur web et ne nécessitent aucune installation de logiciel supplémentaire. C’est un moyen rapide et facile de résoudre efficacement vos tâches liées au HTML.
