Navegación HTML – Ejemplos de Java

En este artículo, aprenderá cómo navegar a través de un documento HTML y realizar una inspección detallada de sus elementos utilizando Aspose.HTML for Java API. Puede crear fácilmente su propia aplicación para analizar, recopilar o extraer información de los documentos HTML, ya que nuestra API proporciona un poderoso conjunto de herramientas para navegar por el documento utilizando CSS Selector, XPath Consuly o Filtros personalizados.

Navegación HTML

Hay muchas maneras que se pueden usar para hacer navegación HTML. La siguiente lista de la lista muestra la forma más sencilla de acceder a todos los elementos DOM utilizando la clase Node:

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.

Usando las propiedades mencionadas, puede navegar a través de un documento HTML como sigue:

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

// Initialize a document from the prepared code
HTMLDocument document = new HTMLDocument(html_code, ".");

// Get the reference to the first child (first <span>) of the document body
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!

Para los escenarios más complicados, cuando necesita encontrar un nodo basado en un patrón específico (por ejemplo, obtener la lista de encabezados, enlaces, etc.), puede usar un TreeWalker o NodeIterator objeto con una implementación personalizada Filter.

El siguiente ejemplo muestra cómo implementar su propio NodeFilter para omitir todos los elementos excepto las imágenes:

public static class OnlyImageFilter extends NodeFilter {
@Override
    public short acceptNode(Node n) {
        // The current filter skips all elements, except IMG elements.
        return "img".equals(n.getLocalName())
                ? FILTER_ACCEPT
                : FILTER_SKIP;
    }
}

Una vez que implementa un filtro, puede usar la navegación HTML como sigue:

// Prepare 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
HTMLDocument document = new 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 using our custom implementation of the filter
ITreeWalker iterator = document.createTreeWalker(document, NodeFilter.SHOW_ALL, new HtmlNavigationTests.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
    HTMLImageElement image = (HTMLImageElement) iterator.getCurrentNode();

    System.out.println(image.getSrc());
    // output: image1.png
    // output: image2.png
}

XPath

La alternativa a la navegación HTML es XML Path Language. La sintaxis de las expresiones XPath es bastante simple y lo que es más importante, es fácil de leer y apoyar.

El siguiente ejemplo muestra cómo usar consultas XPATH dentro de la Aspose.HTML for Java API:

// Prepare 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
HTMLDocument document = new HTMLDocument(code, ".");

// Here, we evaluate the XPath expression where we select all child <span> elements from elements whose 'class' attribute equals to 'happy'
IXPathResult result = document.evaluate("//*[@class='happy']//span",
        document,
        null,
        XPathResultType.Any,
        null
);

// Iterate over the resulted nodes
for (Node node; (node = result.iterateNext()) != null; ) {
    System.out.println(node.getTextContent());
    // output: Hello!
    // output: World!
}

Selector de CSS

Junto con HTML navegación y XPath puede usar CSS Selector API que también es compatible con nuestra biblioteca. Esta API está diseñada para crear un patrón de búsqueda para que coincida con elementos en un árbol de documentos basado en la sintaxis CSS Selectors.

// Prepare 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
HTMLDocument document = new HTMLDocument(code, ".");

// Here, we create a CSS Selector that extracts all elements whose 'class' attribute equals to 'happy' and their child SPAN elements
NodeList elements = document.querySelectorAll(".happy span");

// Iterate over the resulted list of elements
elements.forEach(element -> {
    System.out.println(((HTMLElement) element).getInnerHTML());
    // output: Hello,
    // output: World!
});