怎么在html中使用less语言,Less.Html 示例五：使用方法详解

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