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

view raw Example-NavigateThroughHTML 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// Load a document from a file
 2string documentPath = Path.Combine(DataDir, "html_file.html");
 3
 4using (var document = new HTMLDocument(documentPath))
 5{
 6    // Get the html element of the document
 7    var element = document.DocumentElement;                
 8    Console.WriteLine(element.TagName); // HTML
 9
10    // Get the last element of the html element
11    element = element.LastElementChild;
12    Console.WriteLine(element.TagName); // BODY
13
14    // Get the first element in the body element
15    element = element.FirstElementChild;
16    Console.WriteLine(element.TagName); // H1
17    Console.WriteLine(element.TextContent); // Header 1
18}

view raw Example-InspectHtmlDocument 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:

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

view raw Example-OnlyImageFilter hosted with ❤ by GitHub

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

 1// Prepare HTML code
 2var code = @"
 3    <p>Hello,</p>
 4    <img src='image1.png'>
 5    <img src='image2.png'>
 6    <p>World!</p>";
 7
 8// Initialize a document based on the prepared code
 9using (var document = new HTMLDocument(code, "."))
10{
11    // To start HTML navigation, we need to create an instance of TreeWalker
12    // 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
13    using (var iterator = document.CreateTreeWalker(document, NodeFilter.SHOW_ALL, new OnlyImageFilter()))
14    {                    
15        while (iterator.NextNode() != null)
16        {
17            // Since we are using our own filter, the current node will always be an instance of the HTMLImageElement
18            // So, we don't need the additional validations here
19            var image = (HTMLImageElement)iterator.CurrentNode;
20
21            Console.WriteLine(image.Src);
22            // output: image1.png
23            // output: image2.png
24
25            // Set an html variable for the document 
26            var html = document.DocumentElement.OuterHTML;                        
27        }
28    }
29}

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

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

view raw Example-CSSSelectorUsage 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