HTML Navigation – C# Examples

Using the Aspose.HTML for .NET library, you can easily create your own application, since our API provides a powerful toolset to analyze and collect information from HTML documents.

This article provides information on how to programmatically extract data from HTML documents with the Aspose.HTML API. You find out:

• how to navigate through an HTML document and perform a detailed inspection of its elements using the API;
• about custom filters usage for iterating over the document elements;
• how to navigate over the document by using CSS Selector or XPath Query.

HTML Navigation

The Aspose.Html.Dom namespace provides API that represents and interacts with any HTML, XML or SVG documents and is entirely based on the WHATWG DOM specification supported in many modern browsers. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).

We consider how the DOM represents an HTML document in memory and how to use API for navigation through HTML files. Many ways can be used to make HTML navigation. The following shortlist shows the simplest way to access all DOM elements:

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.

Four of the Node class properties – FirstChild, LastChild, NextSibling, and PreviousSibling, each provides a live reference to another element with the defined relationship to the current element if the related element exists. For a complete list of classes and methods represented in the Aspose.Html.Dom Namespace, please visit API Reference Source.

Using the mentioned properties, you can navigate through an HTML document as it follows:

// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
// Prepare HTML code
var html_code = "<span>Hello</span> <span>World!</span>";

// Initialize a document from the prepared code
using (var document = new Aspose.Html.HTMLDocument(html_code, "."))
{
    // Get the reference to the first child (first SPAN) of the BODY
    var element = document.Body.FirstChild;
    Console.WriteLine(element.TextContent); // output: Hello

    // Get the reference to the whitespace between html elements
    element = element.NextSibling;
    Console.WriteLine(element.TextContent); // output: ' '

    // Get the reference to the second SPAN element
    element = element.NextSibling;
    Console.WriteLine(element.TextContent); // output: World!
}

Inspect HTML

Aspose.HTML contains a list of methods that are based on the Element Traversal Specifications. You can perform a detailed inspection of the document and its elements using the API. The following code sample shows the generalized usage of Element Traversal features.

//Load a document from a file
string documentPath = System.IO.Path.Combine(DataDir, "html_file.html");
using (var document = new Aspose.Html.HTMLDocument(documentPath))
{
    // Get the html element of the document
    var element = document.DocumentElement;                
    Console.WriteLine(element.TagName); // HTML
    
    // Get the last element of the html element
    element = element.LastElementChild;
    Console.WriteLine(element.TagName); // BODY
    
    // Get the first element of the body element
    element = element.FirstElementChild;
    Console.WriteLine(element.TagName); // H1
    Console.WriteLine(element.TextContent); // Header 1     
}

Note: You need to specify the path to the source HTML file in your local file system (documentPath).

The DocumentElement property of the Document class gives direct access to the <html> element of the document ( html_file.html). The LastElementChild property of the Document class returns the last child element of the <html> element. It is the <body> element. According to the code snippet above, the variable “element” is overloaded again, and the FirstElementChild property returns the first child of the <body> element. It is the <h1> element.

Custom Filter Usage

For the more complicated scenarios, when you need to find a node based on a specific pattern (e.g., get the list of headers, links, etc.), you can use a specialized TreeWalker or NodeIterator object with a custom Filter implementation.

The following example shows how to implement your own NodeFilter to skip all elements except images:

// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
class OnlyImageFilter : Aspose.Html.Dom.Traversal.Filters.NodeFilter
{
    public override short AcceptNode(Aspose.Html.Dom.Node n)
    {
        // The current filter skips all elements, except IMG elements.
        return string.Equals("img", n.LocalName)
            ? FILTER_ACCEPT
            : FILTER_SKIP;
    }
}

Once you implement a filter, you can use HTML navigation as it follows:

// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
// Prepare HTML code
var code = @"
    <p>Hello</p>
    <img src='image1.png'>
    <img src='image2.png'>
    <p>World!</p>";

// Initialize a document based on the prepared code
using (var document = new Aspose.Html.HTMLDocument(code, "."))
{
    // To start HTML navigation we need to create an instance of TreeWalker.
    // The specified parameters mean that it starts walking from the root of the document, iterating all nodes and use our custom implementation of the filter
    using (var iterator = document.CreateTreeWalker(document, Aspose.Html.Dom.Traversal.Filters.NodeFilter.SHOW_ALL, new OnlyImageFilter()))
    {         
        while (iterator.NextNode() != null)
        {
            // Since we are using our own filter, the current node will always be an instance of the HTMLImageElement.
            // So, we don't need the additional validations here.
            var image = (Aspose.Html.HTMLImageElement)iterator.CurrentNode;

            System.Console.WriteLine(image.Src);
            // output: image1.png
            // output: image2.png
        }
    }
}

XPath Query

The alternative to the HTML Navigation is XPath Query ( XML Path Language) that often referred to simply as an XPath. It is a query language that can be used to query data from HTML documents. It is based on a DOM representation of the HTML document, and selects nodes by various criteria. The syntax of the XPath expressions is quite simple, and what is more important, it is easy to read and support.

The following example shows how to use XPath queries within Aspose.HTML API:

// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
// Prepare HTML code
var code = @"
    <div class='happy'>
        <div>
            <span>Hello!</span>
        </div>
    </div>
    <p class='happy'>
        <span>World</span>
    </p>
";

// Initialize a document based on the prepared code
using (var document = new Aspose.Html.HTMLDocument(code, "."))
{
    // Here we evaluate the XPath expression where we select all child SPAN elements from elements whose 'class' attribute equals to 'happy':
    var result = document.Evaluate("//*[@class='happy']//span",
        document,
        null,
        Aspose.Html.Dom.XPath.XPathResultType.Any,
        null);

    // Iterate over the resulted nodes
    for (Aspose.Html.Dom.Node node; (node = result.IterateNext()) != null;)
    {
        System.Console.WriteLine(node.TextContent);
        // output: Hello
        // output: World!
    }
}

CSS Selector

Along with HTML Navigation and XPath, you can use CSS Selector API that is also supported by our library. This API is designed to create a search pattern to match elements in a document tree based on CSS Selectors syntax.

In the following example, we use the QuerySelectorAll() method for navigation through an HTML document and search the needed elements. This method takes as a parameter the query selector and returns a NodeList of all the elements, which match the specified selector.

// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
// Prepare HTML code
var code = @"
    <div class='happy'>
        <div>
            <span>Hello</span>
        </div>
    </div>
    <p class='happy'>
        <span>World!</span>
    </p>
";

// Initialize a document based on the prepared code
using (var document = new Aspose.Html.HTMLDocument(code, "."))
{
    // Here we create a CSS Selector that extract all elements whose 'class' attribute equals to 'happy' and their child SPAN elements
    var elements = document.QuerySelectorAll(".happy span");

    // Iterate over the resulted list of elements
    foreach (Aspose.Html.HTMLElement element in elements)
    {
        System.Console.WriteLine(element.InnerHTML);
        // output: Hello
        // output: World!
    }
}

You can download the complete C# examples and data files from GitHub.

Aspose.HTML offers free online HTML Web Applications that are an online collection of converters, mergers, SEO tools, HTML code generators, URL tools, and more. The applications work on any operating system with a web browser and do not require any additional software installation. Easily convert, merge, encode, generate HTML code, extract data from the web, or analyze web pages in terms of SEO wherever you are. Use our collection of HTML Web Applications to perform your daily matters and make your workflow seamless!