HTML Navigation – Java Examples

Data Extraction, also well known as web data extraction, is used for extracting data from websites. A Data Extraction software will help you to automate the process of extracting data based on your requirements. Using Aspose.HTML class library, you can easily create your own application, since our API provides a powerful toolset to analyze and collect information from HTML documents.

HTML navigation

There are many ways that can be used to make HTML navigation. The following shortlist shows the simplest way to access to all DOM elements:

Property	Description
FirstChild	Accessing this attribute of an element must return a reference to the first child node.
LastChild	Accessing this attribute of an element must return a reference to the last child node
NextSibling	Accessing this attribute of an element must return a reference to the sibling node of that element which most immediately follows that element.
PreviousSibling	Accessing this attribute 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.

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

// Prepare an HTML code
String html_code = "<span>Hello</span> <span>World!</span>";

// Initialize a document from the prepared code
com.aspose.html.HTMLDocument document = new com.aspose.html.HTMLDocument(html_code, ".");
try {
    // Get the reference to the first child (first SPAN) of the BODY
    com.aspose.html.dom.Element element = document.getBody().getFirstElementChild();
    System.out.println(element.getTextContent()); // output: Hello

    // Get the reference to the second SPAN element
    element = element.getNextElementSibling();
    System.out.println(element.getTextContent()); // output: World!
} finally {
    if (document != null) {
        document.dispose();
    }
}

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 next example shows how to implement your own NodeFilter to skip all elements except images:

package com.aspose.html.examples.java;

// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-Java
public class OnlyImageFilter extends com.aspose.html.dom.traversal.filters.NodeFilter {

    @Override
    public short acceptNode(com.aspose.html.dom.Node n) {
        // The current filter skips all elements, except IMG elements.
        return "img".equals(n.getLocalName()) ? FILTER_ACCEPT : FILTER_SKIP;
    }

}

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

// Prepare an HTML code
String code = "    < p > Hello </p >\n" +
              "    <img src = 'image1.png' >\n" +
              "    <img src = 'image2.png' >\n" +
              "    <p > World ! </p >\n";

// Initialize a document based on the prepared code
com.aspose.html.HTMLDocument document = new com.aspose.html.HTMLDocument(code, ".");
try {
    // 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
    com.aspose.html.dom.traversal.ITreeWalker iterator = document.createTreeWalker(document, com.aspose.html.dom.traversal.filters.NodeFilter.SHOW_ALL, new OnlyImageFilter());
    // Use
    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.
        com.aspose.html.HTMLImageElement image = (com.aspose.html.HTMLImageElement) iterator.getCurrentNode();

        System.out.println(image.getSrc());
        // output: image1.png
        // output: image2.png
    }
} finally {
    if (document != null) {
        document.dispose();
    }
}

XPath

The alternative to the HTML Navigation is XML Path Language. 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::

// Prepare an HTML code
String code = "< div class='happy' >\n" +
              "        <div >\n" +
              "            <span > Hello ! </span >\n" +
              "        </div >\n" +
              "    </div >\n" +
              "    <p class='happy' >\n" +
              "        <span > World </span >\n" +
              "    </p >\n";

// Initialize a document based on the prepared code
com.aspose.html.HTMLDocument document = new com.aspose.html.HTMLDocument(code, ".");
try {
    // Here we evaluate the XPath expression where we select all child SPAN elements from elements whose 'class' attribute equals to 'happy':
    com.aspose.html.dom.xpath.IXPathResult result = document.evaluate("//*[@class='happy']//span",
            document,
            null,
            com.aspose.html.dom.xpath.XPathResultType.Any,
            null
    );

    // Iterate over the resulted nodes
    for (com.aspose.html.dom.Node node; (node = result.iterateNext()) != null; ) {
        System.out.println(node.getTextContent());
        // output: Hello
        // output: World!
    }
} finally {
    if (document != null) {
        document.dispose();
    }
}

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.

// Prepare an HTML code
String code = "< div class='happy' >\n" +
              "        <div >\n" +
              "            <span > Hello </span >\n" +
              "        </div >\n" +
              "    </div >\n" +
              "    <p class='happy' >\n" +
              "        <span > World ! </span >\n" +
              "    </p >\n";

// Initialize a document based on the prepared code
com.aspose.html.HTMLDocument document = new com.aspose.html.HTMLDocument(code, ".");
try {
    // Here we create a CSS Selector that extract all elements whose 'class' attribute equals to 'happy' and their child SPAN elements
    com.aspose.html.collections.NodeList elements = document.querySelectorAll(".happy span");

    // Iterate over the resulted list of elements
    elements.forEach(element -> {
        System.out.println(((com.aspose.html.HTMLElement) element).getInnerHTML());
        // output: Hello
        // output: World!
    });
} finally {
    if (document != null) {
        document.dispose();
    }
}