官方示例文档:https://github.com/AngleSharp/AngleSharp/wiki/Examples
博主我只是把翻译放在csdn,方便自己和同事、同学和同志看
这是(日益增长的)用于AngleSharp日常使用的示例列表。
解析一个定义良好的文档
当然,AngleSharp可以很好地处理定义良好的文档。但是,一份看似不明确的文件实际上是明确定义的。以下文档有效,完全没有错误,并且也被Google用于制作。文档生成的序列化输出可以与IE,Chrome或Firefox等浏览器的序列化进行比较。
var source = @ “
<!DOCTYPE html>
<html lang = en>
<meta charset = utf-8>
<meta name = viewport content = ” “ initial-scale = 1,minimum-scale = 1,width = device-width “ ” >
<title>错误404(未找到)!! 1 </ title>
<style>
* {margin:0; padding:0} html,code {font:15px / 22px arial,sans-serif} html {background:#fff; color:#222; padding:15px} body {margin:7%auto 0; max-width:390px; min-height:180px; padding:30px 0 15px} *> body {background:url(// www.google.com/images/errors/robot.png)100%5px no-repeat; padding正文:205px} p {margin:11px 0 22px; overflow:hidden} ins {color:#777; text-decoration:none} amedia {border:0} @media screen and(max-width:772px){body {background:none; margin-top:0; max-width:none; padding-right:0}}#logo {background:url(// www.google.com/images/errors/logo_sm_2.png)no-repeat } @media唯一屏幕和(min-resolution:192dpi){#logo {background:url(// www.google.com/images/errors/logo_sm_2_hr.png)不重复0%0%/ 100%100%; -moz-border-image:url(// www.google.com/images/errors/logo_sm_2_hr.png)0}} @ media only screen and(-webkit-min-device-pixel-ratio:2){#logo {背景:url(// www.google.com/images/errors/logo_sm_2_hr.png)no-repeat; -webkit-background-size:100%100%}}#logo {display:inline-block; height:55px; width:为150px}
</ style>
<a href=//www.google.com/> <span id = logo aria-label = Google> </ span> </a>
<p> <b> 404。</ b> <ins >这是一个错误。</ ins>
<p>在此服务器上未找到请求的URL <code> / error </ code>。<ins>这就是我们所知道的。</ ins> “ ;
//创建一个新的分析器前端(可以重用)
var parser = new HtmlParser();
//获取DOM表示
var document = parser.Parse(source);
//将其序列化回控制台
Console.WriteLine(document.DocumentElement.OuterHtml);
所以我们定义一些源代码,调用Parse一个HtmlParser实例的方法。该Parse方法使用提供的源代码构建DOM。之后我们将DOM序列化回字符串。最后我们在控制台中输出这个字符串。
简单的文件操作
AngleSharp根据官方HTML5规范构建DOM。这也意味着最终的模型是完全交互式的,可以用于简单的操作。以下示例创建一个文档并通过插入另一个带有文本的段落元素来更改树结构。
静态 无效 FirstExample()
{
var parser = new HtmlParser();
var document = parser.Parse(“ <h1>一些示例源</ h1> <p>这是一个段落元素”);
//用下面的文档做一些事情
Console.WriteLine(“序列化(原始)文档:”);
Console.WriteLine(document.DocumentElement.OuterHtml);
var p = document.CreateElement(“ p ”);
p.TextContent = “这是另一段。” ;
Console.WriteLine(“在主体中插入另一个元素... ”);
document.Body.AppendChild(P);
Console.WriteLine(“再次序列化文档:”);
Console.WriteLine(document.DocumentElement.OuterHtml);
}
这里解析器将创建一个新的IHtmlDocument实例,然后查询它以找到一些匹配的节点。在上面的示例代码中,我们还创建了另一个IElement,这是IHtmlParagraphElement。这一个然后被附加到Body文档的节点。
获得某些元素
AngleSharp公开所有DOM列表,IEnumerable就像IEnumerable这个NodeList类一样。这使我们可以将LINQ与一些已知的DOM功能(如QuerySelectorAll方法)结合使用。
静态 无效 UsingLinq()
{
var parser = new HtmlParser();
var document = parser.Parse(“ <ul> <li>第一项<li>第二项<li class ='blue'>第三项!<li class ='blue red'>最后一项!</ ul> ”) ;
//用LINQ
做些什么var blueListItemsLinq = document.All.Where(m => m.LocalName == “ li ” && m.ClassList.Contains(“ blue ”));
//或直接使用CSS选择器
var blueListItemsCssSelector = document.QuerySelectorAll(“ li.blue ”);
Console.WriteLine(“比较两种方式... ”);
Console.WriteLine();
Console.WriteLine(“ LINQ:”);
foreach(var item in blueListItemsLinq)
Console.WriteLine(item.Text());
Console.WriteLine();
Console.WriteLine(“ CSS:”);
foreach(var item in blueListItemsCssSelector)
Console.WriteLine(item.Text());
}
由于返回包含在文档中的所有节点的All属性,我们可以非常有效地使用LINQ。另一方面,也返回(同)一个对象。因此,这可以用LINQ过滤!另外这个列表已经过滤。IDocumentIElementQuerySelectorAllAllIHtmlCollection
也可以All使用与选择器相同的特殊星号*选择器:
//和document.All一样
var blueListItemsLinq = document.QuerySelectorAll(“*”)。Where(m => m.LocalName == “ li ” && m.ClassList.Contains(“ blue ”));
这完全一样吗?实际上,no - All返回所谓的活动 DOM列表,即如果我们将对象保存在某处,我们将始终访问最新的DOM更改。
获取单个元素
另外我们有这个QuerySelector方法。这与FirstOrDefault()用于生成结果的LINQ语句非常接近。使用该QuerySelector方法的树遍历可能会更有效一些。
我们来看一些示例代码:
static void SingleElements()
{
var parser = new HtmlParser();
var document = parser.Parse(“ <b> <i>这是一些<em>粗体<u>和</ u>斜体</ em>文本!</ i> </ b> ”);
var emphasisize = document.QuerySelector(“ em ”);
Console.WriteLine(“获取文本的几种方法之间的区别:”);
Console.WriteLine();
Console.WriteLine(“仅来自C#/ AngleSharp:”);
Console.WriteLine();
Console.WriteLine(emphasize.ToHtml()); // <em>粗体<u>和</ u>斜体</ em>
Console.WriteLine(emphasisize.Text()); // boldanditalic
Console.WriteLine();
Console.WriteLine(“来自DOM:”);
Console.WriteLine();
Console.WriteLine(emphasize.InnerHtml); // bold <u>和</ u>斜体
Console.WriteLine(emphasis.OuterHtml); // <em>粗体<u>和</ u>斜体</ em>
Console.WriteLine(emphasis.TextContent); //粗体和斜体
}
输出命令试图演示从节点获取字符串的几种方式之间的差异。实际上,DOM属性OuterHtml使用该ToHtml()版本来生成HTML代码。其他变体都是不同的。虽然Text()只是帮助去掉文本(并且省略了
static void SimpleScriptingSample()
{
//我们需要一个自定义配置
var config = Configuration.Default.WithJavaScript();
//让我们用这个配置创建一个新的分析器
var parser = new HtmlParser(config);
//这是我们的示例源代码,我们将设置标题并在文档上写入
。var source = @ “ <!doctype html>
<html>
<head> <title> Sample </ title> </ head>
<body>
< script>
document.title ='Simple manipulation ...';
document.write('<span class = greeting> Hello World!</ span>');
</ script>
</ body> “ ;
var document = parser.Parse(source);
//将输出修改后的HTML
Console.WriteLine(document.DocumentElement.OuterHtml);
}
此代码只是解析给定的HTML代码,遇到提供的JavaScript并执行它。JavaScript将在给定的点处操作文档,更改文档的标题并附加更多HTML来解析。最后我们会看到,打印的(序列化)HTML与原始HTML不同。
更复杂的JavaScript DOM交互
在AngleSharp上使用JavaScript是没有问题的。在当前状态下,我们也可以轻松使用DOM操作,如创建元素,添加或删除元素。
以下示例代码执行DOM查询,创建新元素并删除现有元素。
static void ExtendedScriptingSample()
{
//我们需要使用JavaScript和CSS进行自定义配置
var config = Configuration.Default.WithJavaScript()。WithCss();
//让我们用这个配置创建一个新的分析器
var parser = new HtmlParser(config);
//这是我们的示例源代码,我们将执行一些DOM操作
var source = @ “ <!doctype html>
<html>
<head> <title>示例</ title> </ head>
<style>
.bold {
font- weight:bold;
}
.italic {
font-style:italic;
}
span {
font-size:12pt;
}
div {
background:#777;
color:#f3f3f3;
}
</ style>
<body>
<div id = content> </ div>
<script>
(function(){
var doc = document;
var content = doc.querySelector('#content');
var span = doc.createElement('span');
span.id ='myspan';
span.classList.add('bold','italic');
span.textContent ='一些示例文本';
content.appendChild(跨度);
var script = doc.querySelector('script');
script.parentNode.removeChild(脚本);
})();
</ script>
</ body> “ ;
var document = parser.Parse(source);
// HTML将完全改变(例如,不再有脚本元素)
Console.WriteLine(document.DocumentElement.OuterHtml);
}
原则上还可以添加其他JavaScript引擎。当然,与基于反射的自动版本相比,手动包装这些对象会带来更优越的性能。不过,该AngleSharp.Scripting.JavaScript库(可在NuGet上获得)展示了将现有JavaScript引擎绑定到AngleSharp的可能性和基础知识。
JavaScript和C#中的事件
以下示例的开头与前两个示例完全相同。我们创建一个包含JavaScriptEngine引擎的自定义配置。启用脚本(在本例中为样式)后,我们可以解析我们的文档。
本示例的示例文档由一个调用该console.log方法的单个脚本组成。添加侦听器之前的一次,添加侦听器之后的另一次。
一旦文档被完全加载,监听器就会被调用。这发生在执行提供的JavaScript之后,因此我们应该在最后看到这个事件。我们还注册了另一个事件监听器,一旦分派自定义事件hello,它将被调用。
public static void EventScriptingExample()
{
//我们需要一个自定义配置
var config = Configuration.Default.WithJavaScript();
//让我们用这个配置创建一个新的分析器
var parser = new HtmlParser(config);
//这是我们的示例源,我们将触发load事件
var source = @ “ <!doctype html>
<html>
<head> <title>事件样本</ title> </ head>
<body>
<script>
控制台.log('设置处理程序!'之前);
document.addEventListener('load',function(){
console.log('Document loaded!');
});
document.addEventListener('hello',function(){
console.log('hello world from JavaScript!');
});
console.log('设置处理程序!'之后);
</ script>
</ body> “ ;
var document = parser.Parse(source);
//最后应该输出HTML
Console.WriteLine(document.DocumentElement.OuterHtml);
//注册来自C#的Hello事件监听器(我们在JS中也有一个)
document.AddEventListener(“ hello ”,(s,ev)=>
{
Console.WriteLine(“来自C#!的Hello World ”);
});
var e = document.CreateEvent(“ event ”);
e.Init(“ hello ”,false,false);
document.Dispatch(E);
}
我们还在C#中为此自定义事件注册一个事件侦听器。这里我们有智能感知和所有其他舒适的工具。通过官方API启动事件后,我们将识别来自JavaScript和C#注册事件侦听器的输出。