HTML-Navigation in C#

Mit der Bibliothek Aspose.HTML for .NET können Sie ganz einfach Ihre eigene Anwendung erstellen, da unsere API ein leistungsstarkes Toolset zum Analysieren und Sammeln von Informationen aus HTML-Dokumenten bietet.

In diesem Artikel erfahren Sie, wie Sie mit der Aspose.HTML for .NET API programmatisch Daten aus HTML-Dokumenten extrahieren können. Sie erfahren es:

wie man durch ein HTML-Dokument navigiert und seine Elemente mithilfe der API detailliert untersucht;
über die Verwendung benutzerdefinierter Filter für die Iteration über die Dokumentelemente;
wie man mit dem CSS-Selektor oder der XPath-Abfrage durch das Dokument navigiert.

Der Aspose.Html.Dom Namespace bietet eine API, die beliebige HTML-, XML- oder SVG-Dokumente darstellt und mit ihnen interagiert, und basiert vollständig auf der WHATWG DOM Spezifikation, die von vielen modernen Browsern unterstützt wird. Das DOM ist ein Dokumentenmodell, das im Browser geladen wird und das Dokument als Knotenbaum darstellt, wobei jeder Knoten einen Teil des Dokuments repräsentiert (z. B. ein Element, eine Textzeichenfolge oder einen Kommentar).

Wir betrachten, wie das DOM ein HTML-Dokument im Speicher darstellt und wie man die API für die Navigation durch HTML-Dateien verwendet. Es gibt viele Möglichkeiten, die HTML-Navigation durchzuführen. Die folgende Liste zeigt den einfachsten Weg, um auf alle DOM-Elemente zuzugreifen:

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.

Vier der Eigenschaften der Klasse Node - FirstChild, LastChild, NextSibling und PreviousSibling - liefern jeweils einen Live-Verweis auf ein anderes Element mit der definierten Beziehung zum aktuellen Element, wenn das verwandte Element existiert. Eine vollständige Liste der Klassen und Methoden, die im Aspose.Html.Dom Namespace vertreten sind, finden Sie unter API Reference Source.

Mit Hilfe der genannten Eigenschaften können Sie durch ein HTML-Dokument wie folgt navigieren:

 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

HTML prüfen

Aspose.HTML enthält eine Liste von Methoden, die auf den Element Traversal Specifications beruhen. Mit Hilfe der API können Sie eine detaillierte Untersuchung des Dokuments und seiner Elemente durchführen. Das folgende Codebeispiel zeigt die verallgemeinerte Verwendung der Element Traversal Features.

 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

Hinweis: Sie müssen den Pfad zur HTML-Quelldatei in Ihrem lokalen Dateisystem angeben (documentPath).

Die Eigenschaft DocumentElement der Klasse Document ermöglicht den direkten Zugriff auf das Element <html> des Dokuments ( html_file.html). Die Eigenschaft LastElementChild der Document-Klasse gibt das letzte Kindelement des Elements “html” zurück. Es ist das Element <body>. Gemäß dem obigen Codeschnipsel wird die Variable element wieder überladen, und die Eigenschaft FirstElementChild gibt das erste Kind des Elements <body> zurück. Es ist das Element <h1>.

Verwendung benutzerdefinierter Filter

Für die komplizierteren Szenarien, wenn Sie einen Knoten auf der Grundlage eines bestimmten Musters finden müssen (z. B. die Liste der Kopfzeilen, Links usw.), können Sie ein spezialisiertes TreeWalker oder NodeIterator Objekt mit einer benutzerdefinierten Filter Implementierung verwenden.

Das folgende Beispiel zeigt, wie Sie Ihren eigenen NodeFilter implementieren können, um alle Elemente außer Bildern auszulassen:

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

Sobald Sie einen Filter implementiert haben, können Sie die HTML-Navigation wie folgt verwenden:

 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

XPath-Abfrage

Die Alternative zur HTML-Navigation ist die XPath-Abfrage ( XML Path Language), die oft einfach als XPath bezeichnet wird. Es handelt sich dabei um eine Abfragesprache, die zur Abfrage von Daten aus HTML-Dokumenten verwendet werden kann. Sie basiert auf einer DOM-Darstellung des HTML-Dokuments und wählt Knoten nach verschiedenen Kriterien aus. Die Syntax der XPath-Ausdrücke ist recht einfach, und was noch wichtiger ist, sie ist leicht zu lesen und zu unterstützen.

Das folgende Beispiel zeigt, wie XPath-Abfragen innerhalb der Aspose.HTML API verwendet werden können:

 1// How to use XPath to select nodes using 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-UseXPathQueryToSelectNodes.cs hosted with ❤ by GitHub

Der Artikel Wie verwendet man die XPath – Evaluate() Methode führt in die Verwendung der Methode Evaluate() ein, um durch ein HTML-Dokument zu navigieren und Knoten nach verschiedenen Kriterien auszuwählen. Anhand von C#-Beispielen lernen Sie, wie Sie mit Hilfe einer XPath-Abfrage alle Knoten mit dem angegebenen Namen auswählen können.

CSS-Selektor

Neben HTML Navigation und XPath können Sie auch die CSS Selector API verwenden, die ebenfalls von unserer Bibliothek unterstützt wird. Diese API wurde entwickelt, um ein Suchmuster zu erstellen, das mit Elementen in einem Dokumentbaum auf der Grundlage der CSS Selectors Syntax übereinstimmt.

Im folgenden Beispiel verwenden wir die Methode QuerySelectorAll() für die Navigation durch ein HTML-Dokument und die Suche nach den benötigten Elementen. Diese Methode nimmt als Parameter den Abfrageselektor und gibt eine NodeList mit allen Elementen zurück, die dem angegebenen Selektor entsprechen.

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

Siehe auch

Weitere Informationen über die effektive Anwendung von Selektoren zur Auswahl der Elemente, die Sie gestalten möchten, finden Sie in dem Artikel CSS-Selektoren. Sie werden grundlegende Selektoren, Kombinatorselektoren, Attributselektoren, Gruppenselektoren und Pseudoselektoren behandeln.
In dem Artikel Verwendung von CSS-Selektoren - QuerySelector() und QuerySelectorAll() erfahren Sie, wie Sie Selektoren effektiv anwenden können, um die Elemente auszuwählen, die Sie gestalten möchten. QuerySelector() und QuerySelectorAll() sind Methoden, mit denen DOM-Elemente abgefragt werden, die einem CSS-Selektor entsprechen.
Sie können die vollständigen C#-Beispiele und Datendateien von GitHub herunterladen.
Aspose.HTML bietet kostenlose Online- HTML-Webanwendungen, die eine Online-Sammlung von Konvertern, Zusammenführungen, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr sind. Die Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Konvertieren, fusionieren, kodieren, generieren Sie HTML-Code, extrahieren Sie Daten aus dem Web oder analysieren Sie Webseiten im Hinblick auf SEO, wo immer Sie sind. Nutzen Sie unsere Sammlung von HTML-Webanwendungen, um Ihre täglichen Aufgaben zu erledigen und Ihren Arbeitsablauf nahtlos zu gestalten!

Datenextraktion Website zu HTML