Less.Html 示例五:使用方法详解

0. 从解析开始

引入 Less.Html 的命名空间:

using Less.Html;

调用静态类型 HtmlParser 的 Parse 方法:

Document document = HtmlParser.Parse(testHtml);

返回的是 HTML DOM 标准的文档对象,我只实现了常见的 DOM 方法,其实 DOM 方法的设计本身就有繁复的地方,这个以后再说。

要方便地查找文档元素,还需要绑定 css 选择器:

var q = Selector.Bind(document);

返回的是一个 C# 的委托,这里只需要理解为一个选择器即可。

如果只想得到选择器,不需要 DOM 文档,可以调用快捷的方法:

var q = HtmlParser.Query(testHtml);

Query 方法没有得到文档的 DOM,所以只能作查找元素使用。如果要修改文档再输出,那么还是要用 Parse 方法,这样才能通过 Document 类型的 ToString 方法输出修改后的文档。


1. 获取文档的内容

和在浏览器使用 javascript 一样,获取文档的内容也可以通过 DOM 方法和 jQuery 的方法:

var p = document.getElementsByTagName("p")[0];

string html = p.innerHTML;

string cls = p.getAttribute("class");

上面是 DOM 的方法。

string html = q("p").html();

string cls = q("p").attr("class");

上面是 jQuery 的方法。

jQuery 的方法有着很好的设计,也正是因为这样,它的使用很普及。jQuery 的选择器和 css 的选择器保持了一致,降低了用户的学习成本。Less.Html 使用了 jQuery 的语法设计,也是基于方便,易学的方向去考虑的。 从上面的示例代码也可以看出,jQuery 的代码比 DOM 要简短,在可读性上还更好了。

无论是 DOM 方法还是 jQuery 方法,设计的思想都是和前端的编程体验保持一致,这是 Less.Html 与其他的解析器最大的不同。这样做的目的是,只要使用者了解 HTML DOM,或者使用过 jQuery,不需要学习任何的新知识就能使用 Less.Html。

Less.Html 支持的选择器会在 http://bibaoke.com/Less.Html 这里更新,支持的 DOM 方法和 jQuery 方法,只需要借助 IDE 的方法属性列表,也就是输入“.”之后出现选择框就可以看到。所有公共的方法都有注释,并且在不断完善之中。


2. 修改文档的内容

Less.Html 不只可以解析 html 文档,还可以对文档做结构化的修改。这是因为我写了这个解析器之后,产生了用解析的方法做 web 视图引擎的念头。我的博客就是使用这个视图引擎写的,编写的效率比 .NET 主打 Razor 视图引擎要高,更重要的是代码风格和 jQuery 相似,形成了和客户端一致的编程体验,这样会更易读,更好维护。

DOM 标准的方法:

var p = document.getElementsByTagName("p")[0];

p.removeAttribute("class");

p.setAttribute("style", "color:red");

p.textContent = "修改的文本";

jQuery 方法:

q("p").removeAttr("class");

q("p").attr("style", "color:red");

q("p").text("修改的文本");


本示例代码:GitHub

粤ICP备15047625号-2