AngleSharp实战教程：HTML解析与DOM操作示例详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00118/article/details/148505710

AngleSharp实战教程：HTML解析与DOM操作示例详解

AngleSharp :angel: The ultimate angle brackets parser library parsing HTML5, MathML, SVG and CSS to construct a DOM based on the official W3C specifications. 项目地址: https://gitcode.com/gh_mirrors/an/AngleSharp

前言

AngleSharp是一个强大的.NET库，专门用于解析和操作HTML文档。作为遵循HTML5规范的解析器，它提供了与浏览器类似的DOM操作能力。本文将深入讲解AngleSharp的核心功能，并通过实际示例展示其强大能力。

基础解析示例

解析标准HTML文档

AngleSharp可以完美处理符合规范的HTML文档，即使是那些看起来不太规范但实际上有效的文档（如Google的错误页面）。以下示例展示了如何解析HTML字符串并输出DOM结构：

var source = @"<!DOCTYPE html><html>...</html>";

// 使用默认配置
IConfiguration config = Configuration.Default;

// 创建浏览上下文
IBrowsingContext context = BrowsingContext.New(config);

// 解析文档
IDocument document = await context.OpenAsync(req => req.Content(source));

// 输出DOM结构
Console.WriteLine(document.DocumentElement.OuterHtml);

关键点解析：

Configuration.Default提供了AngleSharp的标准配置
BrowsingContext是AngleSharp的核心类，负责文档解析和操作
OpenAsync方法支持多种输入源，包括虚拟请求

DOM操作实战

动态修改文档结构

AngleSharp的DOM模型是完全可交互的，我们可以轻松地修改文档结构：

// 创建基础文档
IDocument document = await context.OpenAsync(req => 
    req.Content("<h1>标题</h1><p>段落内容"));

// 创建新段落元素
IElement p = document.CreateElement("p");
p.TextContent = "新增段落内容";

// 将新段落添加到body中
document.Body.AppendChild(p);

技术要点：

CreateElement方法用于创建新元素
DOM操作方法与浏览器API保持一致
修改会实时反映在DOM结构中

元素查询技巧

使用LINQ查询元素

AngleSharp将DOM列表暴露为IEnumerable<T>，可以与LINQ完美配合：

// 获取所有class包含"blue"的li元素
var blueItems = document.All
    .Where(m => m.LocalName == "li" && m.ClassList.Contains("blue"));

CSS选择器查询

更高效的方式是使用CSS选择器：

// 等效的CSS选择器查询
var blueItems = document.QuerySelectorAll("li.blue");

性能提示：

对于简单查询，CSS选择器通常更高效
复杂条件查询适合使用LINQ
QuerySelector相当于FirstOrDefault的单元素查询

文本内容处理

AngleSharp提供了多种获取元素文本的方式：

IElement element = document.QuerySelector("em");

Console.WriteLine(element.InnerHtml);  // 包含子元素HTML
Console.WriteLine(element.OuterHtml); // 包含自身标签的完整HTML
Console.WriteLine(element.TextContent); // 纯文本内容
Console.WriteLine(element.Text());    // 智能文本提取(排除script等)

注意区别：

InnerHtml/OuterHtml保留HTML结构
TextContent获取所有文本节点内容
Text()是扩展方法，会智能过滤不需要的内容

JavaScript集成

基础脚本执行

AngleSharp可以与JavaScript引擎集成，实现动态文档操作：

// 配置包含JavaScript支持
IConfiguration config = Configuration.Default.WithJs();

// 解析包含JS的文档
IDocument document = await context.OpenAsync(req => req.Content(@"
    <script>
        document.title = '修改后的标题';
        document.write('<p>动态内容</p>');
    </script>
"));

// 输出被JS修改后的HTML
Console.WriteLine(document.DocumentElement.OuterHtml);

高级DOM操作

JavaScript可以执行完整的DOM操作：

var source = @"
<script>
    var div = document.createElement('div');
    div.textContent = '动态创建的元素';
    document.body.appendChild(div);
    document.querySelector('script').remove();
</script>";

// 解析后会包含动态创建的div，且script元素已被移除

事件处理机制

跨语言事件处理

AngleSharp支持在C#和JavaScript之间共享事件系统：

// JavaScript中添加事件监听
var source = @"
<script>
document.addEventListener('customEvent', function() {
    console.log('JS收到事件');
});
</script>";

// C#中触发事件
var evt = document.CreateEvent("event");
evt.Init("customEvent", false, false);
document.Dispatch(evt);

// C#中监听事件
document.AddEventListener("customEvent", (s, e) => {
    Console.WriteLine("C#收到事件");
});

事件系统特点：