Навигация по HTML документу – С#

Используя библиотеку классов Aspose.HTML, вы можете легко создать собственное приложение, поскольку наш API предоставляет мощный набор инструментов для анализа и сбора информации из HTML-документов.

В этой статье содержится информация о том, как программно извлекать данные из HTML-документов с помощью Aspose.HTML for .NET API. Вы узнаете:

как перемещаться по HTML-документу и выполнять детальную проверку его элементов с помощью API;
об использовании пользовательских фильтров для перебора элементов документа;
как перемещаться по документу с помощью CSS Selector или XPath Query.

HTML-навигация

Пространство имен Aspose.HtmlDom (объектная модель документа) предоставляет API, который представляет и взаимодействует с любыми документами HTML, XML или SVG и полностью основан на поддерживаемой спецификации WHATWG DOM. во многих современных браузерах. DOM – это модель документа, загруженная в браузер и представляющая документ в виде дерева узлов, где каждый узел представляет часть документа (например, элемент, текстовую строку или комментарий).

We consider how the DOM represents an HTML document in memory and how to use API for navigation through HTML files. Many ways can be used to make HTML navigation. The following shortlist shows the simplest way to access all DOM elements:

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.

Четыре свойства класса Node – FirstChild, LastChild, NextSibling и PreviousSibling, каждое из которых предоставляет живую ссылку на другой элемент. с определенной связью с текущим элементом, если связанный элемент существует. Полный список классов и методов, представленных в пространстве имен Aspose.Html.Dom, вы найдете в Справочнике API.

Используя упомянутые свойства, вы можете перемещаться по HTML-документу следующим образом:

 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

Проверка HTML-документа и его элементов

Aspose.HTML содержит список методов, основанных на Спецификациях обхода элементов. Вы можете выполнить детальную проверку документа и его элементов с помощью API. В следующем примере кода показано обобщенное использование функций обхода элементов.

 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

Note: You need to specify the path to the source HTML file in your local file system (documentPath).

Свойство DocumentElement класса Document дает прямой доступ к элементу <html> документа ( html_file.html). Свойство LastElementChild класса Document возвращает последний дочерний элемент элемента <html>. Это элемент <body>. Согласно приведенному выше фрагменту кода, переменная element снова перегружается, и свойство FirstElementChild возвращает первый дочерний элемент элемента <body>. Это элемент <h1>.

Использование пользовательского фильтра

Для более сложных сценариев, когда вам нужно найти узел по определенному шаблону (например, получить список заголовков, ссылок и т. д.), вы можете использовать специализированный TreeWalker или объект NodeIterator с реализация пользовательского Filter.

В следующем примере показано, как реализовать собственный NodeFilter, чтобы пропустить все элементы, кроме изображений:

 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

После внедрения фильтра вы сможете использовать HTML-навигацию следующим образом:

 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

XPath-запрос

Альтернативой HTML-навигации является XPath Query ( XML Path Language), который часто называют просто XPath. Это язык запросов, который можно использовать для запроса данных из HTML-документов. Он основан на DOM-представлении HTML-документа и выбирает узлы по различным критериям. Синтаксис выражений XPath довольно прост, и, что более важно, его легко читать и поддерживать.

В следующем примере показано, как использовать запросы XPath в Aspose.HTML API:

 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

Селектор CSS

Наряду с HTML Navigation и XPath вы можете использовать API селектора CSS, который также поддерживается нашей библиотекой. Этот API предназначен для создания шаблона поиска для сопоставления элементов в дереве документов на основе синтаксиса CSS Selectors.

В следующем примере мы используем метод QuerySelectorAll() для навигации по HTML-документу и поиска необходимых элементы. Этот метод принимает в качестве параметра селектор запроса и возвращает NodeList всех элементов, соответствующих указанному селектору.

 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

Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчиков, инструментов SEO, генераторов HTML-кода, инструментов URL и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Легко конвертируйте, объединяйте, кодируйте, генерируйте HTML-код, извлекайте данные из Интернета или анализируйте веб-страницы с точки зрения SEO, где бы вы ни находились. Используйте нашу коллекцию веб-приложений HTML, чтобы выполнять повседневные дела и сделать свой рабочий процесс безупречным!

Data Extraction Website to HTML