Navegación HTML en C#

Utilizando la biblioteca Aspose.HTML for .NET, puede crear fácilmente su propia aplicación, ya que nuestra API proporciona un potente conjunto de herramientas para analizar y recopilar información de documentos HTML.

cómo navegar por un documento HTML y realizar una inspección detallada de sus elementos utilizando la API;
sobre el uso de filtros personalizados para iterar sobre los elementos del documento;
cómo navegar por el documento utilizando CSS Selector o XPath Query.

Este artículo proporciona información sobre cómo extraer datos mediante programación de documentos HTML con Aspose.HTML for .NET API. Lo descubres:

Navegación HTML

El espacio de nombres Aspose.Html.Dom proporciona una API que representa e interactúa con cualquier documento HTML, XML o SVG y se basa completamente en la especificación WHATWG DOM compatible con muchos navegadores modernos. El DOM es un modelo de documento cargado en el navegador y que representa el documento como un árbol de nodos, donde cada nodo representa parte del documento (por ejemplo, un elemento, una cadena de texto o un comentario).

Consideraremos cómo el DOM representa un documento HTML en la memoria y cómo usar API para navegar a través de archivos HTML. Se pueden utilizar muchas formas para realizar navegación HTML. La siguiente lista muestra la forma más sencilla de acceder a todos los elementos 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.

Cuatro de las propiedades de clase Node: FirstChild, LastChild, NextSibling y PreviousSibling, cada una proporciona una referencia en vivo a otro elemento con la relación definida con el elemento actual si el elemento relacionado existe. Para obtener una lista completa de clases y métodos representados en el espacio de nombres Aspose.Html.Dom, visite Fuente de referencia API.

Usando las propiedades mencionadas, puede navegar a través de un documento HTML de la siguiente manera:

 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

Inspeccionar HTML

Aspose.HTML contiene una lista de métodos que se basan en las Element Traversal Specifications. Puede realizar una inspección detallada del documento y sus elementos utilizando la API. El siguiente ejemplo de código muestra el uso generalizado de las funciones de Element Traversal.

 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

Nota: Debe especificar la ruta al archivo HTML de origen en su sistema de archivos local (documentPath).

La propiedad DocumentElement de la clase Documento proporciona acceso directo al elemento <html> del documento ( html_file.html). La propiedad LastElementChild de la clase Documento devuelve el último elemento hijo del elemento <html>. Es el elemento <body>. Según el fragmento de código anterior, la variable element se sobrecarga nuevamente y la propiedad FirstElementChild devuelve el primer hijo del elemento <body>. Es el elemento <h1>.

Uso de filtro personalizado

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 especializado con una implementación de Filter personalizada.

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

 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-OnlyImageFilter.cs hosted with ❤ by GitHub

Una vez que implemente un filtro, puede usar la navegación HTML de la siguiente manera:

 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

Consulta XPath

La alternativa a la Navegación HTML es la consulta XPath ( XML Path Language) que a menudo se denomina simplemente XPath. Es un lenguaje de consulta que se puede utilizar para consultar datos de documentos HTML. Se basa en una representación DOM del documento HTML y selecciona nodos según varios criterios. La sintaxis de las expresiones XPath es bastante simple y, lo que es más importante, es fácil de leer y de soportar.

El siguiente ejemplo muestra cómo utilizar consultas XPath dentro de la API Aspose.HTML:

 1// Extract nodes using XPath 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 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-XPathQueryUsage.cs hosted with ❤ by GitHub

El artículo Cómo utilizar la consulta XPath en HTML – Método Evaluate() presenta cómo utilizar el método Evaluate() para navegar a través de un documento HTML y seleccionar nodos según varios criterios. Con ejemplos de C#, aprenderá cómo seleccionar todos los nodos con el nombre especificado mediante una consulta XPath.

Selector de CSS

Junto con Navegación HTML y XPath, puede utilizar 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 hacer coincidir elementos en un árbol de documentos basado en la sintaxis de Selectores CSS.

En el siguiente ejemplo, utilizamos el método QuerySelectorAll() para navegar a través de un documento HTML y buscar los elementos necesarios. Este método toma como parámetro el selector de consultas y devuelve una NodeList de todos los elementos que coinciden con el selector especificado.

 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-CSSSelectorUsage.cs hosted with ❤ by GitHub

Ver también

Para obtener más información sobre cómo aplicar selectores de manera efectiva para seleccionar los elementos a los que desea aplicar estilo, visite el artículo Selectores CSS. Cubrirá los selectores básicos, los selectores combinados, los selectores de atributos, los selectores de grupo y los pseudo selectores.
En el artículo Cómo usar CSS Selector – QuerySelector() y QuerySelectorAll(), aprenderá cómo aplicar selectores de manera efectiva para seleccionar los elementos a los que desea aplicar estilo. QuerySelector() y QuerySelectorAll() son métodos que se utilizan para consultar elementos DOM que coinciden con un selector CSS.
Puede descargar los ejemplos completos de C# y los archivos de datos desde GitHub.
Aspose.HTML ofrece Aplicaciones web HTML gratuitas en línea que son una colección en línea de convertidores, fusiones, herramientas de SEO, generadores de código HTML, herramientas de URL y más. Las aplicaciones funcionan en cualquier sistema operativo con un navegador web y no requieren ninguna instalación de software adicional. Convierta, fusione, codifique, genere código HTML, extraiga datos de la web o analice páginas web en términos de SEO fácilmente dondequiera que esté. Utilice nuestra colección de aplicaciones web HTML para realizar sus asuntos diarios y hacer que su flujo de trabajo sea fluido.

Extracción de datos Sitio web a HTML