Navigation HTML en C#

En utilisant la bibliothèque Aspose.HTML for .NET, vous pouvez facilement créer votre propre application, car notre API fournit un ensemble d’outils puissants pour analyser et collecter des informations à partir de documents HTML.

Cet article explique comment extraire par programme des données de documents HTML à l’aide de l’API Aspose.HTML for .NET. Vous découvrirez :

comment naviguer dans un document HTML et effectuer une inspection détaillée de ses éléments à l’aide de l’API ;
sur l’utilisation de filtres personnalisés pour l’itération sur les éléments du document ;
comment naviguer dans le document à l’aide d’un sélecteur CSS ou d’une requête XPath.

L’espace de noms Aspose.Html.Dom fournit une API qui représente et interagit avec tout document HTML, XML ou SVG et est entièrement basé sur la spécification WHATWG DOM prise en charge par de nombreux navigateurs modernes. Le DOM est un modèle de document chargé dans le navigateur et représentant le document sous la forme d’un arbre de nœuds, où chaque nœud représente une partie du document (par exemple un élément, une chaîne de texte ou un commentaire).

Nous examinons comment le DOM représente un document HTML en mémoire et comment utiliser l’API pour naviguer dans les fichiers HTML. Il existe de nombreuses façons de naviguer dans un document HTML. La liste suivante montre la manière la plus simple d’accéder à tous les éléments du DOM :

Property	Description
FirstChild	Accessing this property of an element must return a reference to the first child node.
LastChild	Accessing this property of an element must return a reference to the last child node
NextSibling	Accessing this property of an element must return a reference to the sibling node of that element which most immediately follows that element.
PreviousSibling	Accessing this property of an element must return a reference to the sibling node of that element which most immediately precedes that element.
ChildNodes	Returns a list that contains all children of that element.

Quatre des propriétés de la classe Node – FirstChild, LastChild, NextSibling et PreviousSibling – fournissent chacune une référence vivante à un autre élément avec la relation définie avec l’élément actuel si l’élément lié existe. Pour obtenir la liste complète des classes et des méthodes représentées dans l’espace de nommage Aspose.Html.Dom, veuillez consulter API Reference Source.

En utilisant les propriétés mentionnées, vous pouvez naviguer dans un document HTML comme suit :

 1// Navigate the HTML DOM using C#
 2
 3// Prepare HTML code
 4string html_code = "<span>Hello,</span> <span>World!</span>";
 5
 6// Initialize a document from the prepared code
 7using (HTMLDocument document = new HTMLDocument(html_code, "."))
 8{
 9    // Get the reference to the first child (first <span>) of the <body>
10    Node element = document.Body.FirstChild;
11    Console.WriteLine(element.TextContent); // output: Hello,
12
13    // Get the reference to the whitespace between html elements
14    element = element.NextSibling;
15    Console.WriteLine(element.TextContent); // output: ' '
16
17    // Get the reference to the second <span> element
18    element = element.NextSibling;
19    Console.WriteLine(element.TextContent); // output: World!
20
21    // Set an html variable for the document 
22    string html = document.DocumentElement.OuterHTML;
23
24    Console.WriteLine(html); // output: <html><head></head><body><span>Hello,</span> <span>World!</span></body></html>
25}

Example-NavigateThroughHTML.cs hosted with ❤ by GitHub

Inspecter le HTML

Aspose.HTML contient une liste de méthodes basées sur les Element Traversal Specifications. Vous pouvez effectuer une inspection détaillée du document et de ses éléments à l’aide de l’API. L’exemple de code suivant montre l’utilisation générale des fonctions de déplacement d’éléments.

 1// Access and navigate HTML elements in a document using C#
 2
 3// Load a document from a file
 4string documentPath = Path.Combine(DataDir, "html_file.html");
 5
 6using (HTMLDocument document = new HTMLDocument(documentPath))
 7{
 8    // Get the html element of the document
 9    Element element = document.DocumentElement;
10    Console.WriteLine(element.TagName); // HTML
11
12    // Get the last element of the html element
13    element = element.LastElementChild;
14    Console.WriteLine(element.TagName); // BODY
15
16    // Get the first element in the body element
17    element = element.FirstElementChild;
18    Console.WriteLine(element.TagName); // H1
19    Console.WriteLine(element.TextContent); // Header 1
20}

Example-InspectHtmlDocument.cs hosted with ❤ by GitHub

Note: Vous devez spécifier le chemin d’accès au fichier HTML source dans votre système de fichiers local (documentPath).

La propriété DocumentElement de la classe Document donne un accès direct à l’élément <html> du document ( html_file.html). La propriété LastElementChild de la classe Document renvoie le dernier élément enfant de l’élément <html>. Il s’agit de l’élément <body>. D’après l’extrait de code ci-dessus, la variable element est à nouveau surchargée, et la propriété FirstElementChild renvoie le premier enfant de l’élément <body>. Il s’agit de l’élément <h1>.

Utilisation de filtres personnalisés

Pour les scénarios plus complexes, lorsque vous avez besoin de trouver un nœud en fonction d’un modèle spécifique (par exemple, obtenir la liste des en-têtes, des liens, etc.), vous pouvez utiliser un objet spécialisé TreeWalker ou NodeIterator avec une implémentation Filter personnalisée.

L’exemple suivant montre comment implémenter votre propre NodeFilter pour ignorer tous les éléments à l’exception des images :

 1// Filter only <img> elements in HTML tree using C#
 2
 3class OnlyImageFilter : Aspose.Html.Dom.Traversal.Filters.NodeFilter
 4{
 5    public override short AcceptNode(Node n)
 6    {
 7        // The current filter skips all elements, except IMG elements
 8        return string.Equals("img", n.LocalName)
 9            ? FILTER_ACCEPT
10            : FILTER_SKIP;
11    }
12}

Example-CustomNodeFilterForImageElements.cs hosted with ❤ by GitHub

Une fois que vous avez mis en place un filtre, vous pouvez utiliser la navigation HTML comme suit :

 1// Implement NodeFilter to skip all elements except images
 2
 3// Prepare HTML code
 4string code = @"
 5    <p>Hello,</p>
 6    <img src='image1.png'>
 7    <img src='image2.png'>
 8    <p>World!</p>";
 9
10// Initialize a document based on the prepared code
11using (HTMLDocument document = new HTMLDocument(code, "."))
12{
13    // To start HTML navigation, we need to create an instance of TreeWalker
14    // The specified parameters mean that it starts walking from the root of the document, iterating all nodes and using our custom implementation of the filter
15    using (ITreeWalker iterator = document.CreateTreeWalker(document, NodeFilter.SHOW_ALL, new OnlyImageFilter()))
16    {
17        while (iterator.NextNode() != null)
18        {
19            // Since we are using our own filter, the current node will always be an instance of the HTMLImageElement
20            // So, we don't need the additional validations here
21            HTMLImageElement image = (HTMLImageElement)iterator.CurrentNode;
22
23            Console.WriteLine(image.Src);
24            // output: image1.png
25            // output: image2.png
26
27            // Set an html variable for the document 
28            string html = document.DocumentElement.OuterHTML;
29        }
30    }
31}

Example-NodeFilterUsage.cs hosted with ❤ by GitHub

Requête XPath

L’alternative à la navigation HTML est la requête XPath ( XML Path Language) qui est souvent appelée simplement XPath. Il s’agit d’un langage de requête qui peut être utilisé pour interroger des données à partir de documents HTML. Il est basé sur une représentation DOM du document HTML et sélectionne les nœuds selon différents critères. La syntaxe des expressions XPath est assez simple et, ce qui est plus important, elle est facile à lire et à prendre en charge.

L’exemple suivant montre comment utiliser les requêtes XPath dans l’API Aspose.HTML :

 1// How to use XPath to select nodes using C#
 2
 3// Prepare HTML code
 4string code = @"
 5    <div class='happy'>
 6        <div>
 7            <span>Hello,</span>
 8        </div>
 9    </div>
10    <p class='happy'>
11        <span>World!</span>
12    </p>
13";
14
15// Initialize a document based on the prepared code
16using (HTMLDocument document = new HTMLDocument(code, "."))
17{
18    // Here we evaluate the XPath expression where we select all child <span> elements from elements whose 'class' attribute equals to 'happy':
19    IXPathResult result = document.Evaluate("//*[@class='happy']//span",
20        document,
21        null,
22        XPathResultType.Any,
23        null);
24
25    // Iterate over the resulted nodes
26    for (Node node; (node = result.IterateNext()) != null;)
27    {
28        Console.WriteLine(node.TextContent);
29        // output: Hello,
30        // output: World!
31    }
32}

Example-UseXPathQueryToSelectNodes.cs hosted with ❤ by GitHub

L’article Comment utiliser une requête XPath en HTML – Méthode Evaluate() présente l’utilisation de la méthode Evaluate() pour naviguer dans un document HTML et sélectionner des nœuds en fonction de différents critères. Avec des exemples en C#, vous apprendrez comment sélectionner tous les nœuds avec un nom spécifié en utilisant une requête XPath.

Sélecteur CSS

Outre HTML Navigation et XPath, vous pouvez utiliser CSS Selector API qui est également pris en charge par notre bibliothèque. Cette API est conçue pour créer un modèle de recherche afin de faire correspondre les éléments d’une arborescence de documents sur la base de la syntaxe des CSS Selectors.

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é.

 1// Extract nodes Using CSS selector in C#
 2
 3// Prepare HTML code
 4string code = @"
 5    <div class='happy'>
 6        <div>
 7            <span>Hello,</span>
 8        </div>
 9    </div>
10    <p class='happy'>
11        <span>World!</span>
12    </p>
13";
14
15// Initialize a document based on the prepared code
16using (HTMLDocument document = new HTMLDocument(code, "."))
17{
18    // Here we create a CSS Selector that extracts all elements whose 'class' attribute equals 'happy' and their child <span> elements
19    NodeList elements = document.QuerySelectorAll(".happy span");
20
21    // Iterate over the resulted list of elements
22    foreach (HTMLElement element in elements)
23    {
24        Console.WriteLine(element.InnerHTML);
25        // output: Hello,
26        // output: World!
27    }
28}

Example-SelectHtmlElementsUsingCssSelector.cs hosted with ❤ by GitHub

Voir aussi

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.
Dans l’article Comment utiliser les sélecteurs CSS – QuerySelector et QuerySelectorAll, vous apprendrez à appliquer efficacement les sélecteurs pour sélectionner les éléments que vous souhaitez styliser. QuerySelector() et QuerySelectorAll() sont des méthodes utilisées pour interroger les éléments du DOM qui correspondent à un sélecteur CSS.
Vous pouvez télécharger les exemples C# complets et les fichiers de données sur GitHub.
Aspose.HTML propose des applications Web HTML gratuites en ligne qui constituent une collection 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. Convertissez, fusionnez, encodez, générez facilement du code HTML, extrayez des données du web ou analysez des pages web en termes de référencement, où que vous soyez. Utilisez notre collection d’applications web HTML pour effectuer vos tâches quotidiennes et rendre votre flux de travail fluide !

Extraction des données Site web en HTML