浏览器解析html的过程如下:
HTML解析器的工作是解析HTML标记到解析树
1)HTML语法定义
HTML的词汇与句法定义在w3c组织创建的规范中。当前版本是HTML4,HTML5的工作正在进行中。
2)不是上下文无关语法
在对解析器的介绍中看到,语法可以用类似BNF的格式规范地定义。不幸的是所有常规解析器的讨论都不适用于HTML(我提及它们并不是为了娱乐,它们可以用于解析CSS和JavaScript)。HTML无法用解析器所需的上下文无关的语法来定义。过去HTML格式规范由DTD (Document Type Definition)来定义,但它不是一个上下文无关语法。
HTML与XML相当接近。XML有许多可用的解析器。HTML还有一个XML变种叫XHTML,那么它们主要区别在哪里呢?区别在于HTML应用更加”宽容”,它容许你漏掉一些开始或结束标签等。它整个是一个“软”句法,不像XML那样严格死板。 总的来说这一看似细微的差别造成了两个不同的世界。一方面这使得HTML很流行,因为它包容你的错误,使网页作者的生活变得轻松。另一方面,它使编写语法格式变得困难。所以综合来说,HTML解析并不简单,现成的上下文相关解析器搞不定,XML解析器也不行。
3)HTML DTD
HTML的定义使用DTD文件。这种格式用来定义SGML族语言,它包含对所有允许的元素的定义,包括它们的属性和层级关系。如我们前面所说,HTML DTD构不成上下文无关语法。
DTD有几种不同类型。严格模式完全尊守规范,但其它模式为了向前兼容可能包含对早期浏览器所用标签的支持。当前的严格模式DTD:
4)DOM
解析器输出的树是由DOM元素和属性节点组成的。DOM的全称为:Document Object Model。它是HTML文档的对象化描述,也是HTML元素与外界(如Javascript)的接口。
DOM与标签有着几乎一一对应的关系,如下:
<html>
<body>
<p>hello world</p>
<div><img src=”/data/upload/help/202211/08/321532365639f31b3b9f8ea8be0c6be2.png”/></div>
</body>
</html>
怎样把html文件转换成标准的DOM4j的DOM
由于html文件不是标准的xml文件
比如:
<OBJECT type=”text/site properties”>
<param name=”Window Styles” value=”0x800025″>
<param name=”comment” value=”title:Online Help”>
<param name=”comment” value=”base:index.htm”>
</OBJECT>
<param>标签不是成对出现的,所以用dom4j是不能解析的
解决方法:
利用cobra.jar架包先把html文件解析成org.w3c.dom.Document类型的dom
然后利用dom4j的方法
DOMReader xmlReader = new DOMReader();
xmlReader.read(org.w3c.dom.Document document)
代码:
UserAgentContext uacontext = new SimpleUserAgentContext();
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
InputStream in = new FileInputStream(“F:/iKnow/chmimport/U2000FAQ_WebHome_123/U2000.hhc”);
Reader reader = new InputStreamReader(in, “GBK”);
org.w3c.dom.Document document = builder.newDocument();
// Here is where we use Cobra’s HTML parser.
HtmlParser parser = new HtmlParser(uacontext, document);
parser.parse(reader);
DOMReader xmlReader = new DOMReader();
System.out.println(xmlReader.read(document).asXML());
如何把html文档表示成dom
举个例子:
你把html看做是一个装有行李的行李箱,箱子里外会有各种大小的储物空间,储物空间里可以放东西。那么,这个装有行李的箱子就可以看是html文档,各个储物空间类似于html的闭合的标签,比如<div></div>,箱子里的衣服看做是某个标签中得数据,比如某个标签中的字符串”HELLO
WORLD”。
假设,全球范围内需要使用一种“机器”对过安检的箱子进行检查,检查过程为:打开箱子,分别去各个储物空间把东西拿出来,检查完毕后再把东西放进去。
为了便于各种类型的“机器”能方便的检查行李箱,人类提出了一种可供机器使用的模块,这种模块可以把箱子抽象为一种类似于树的数据结构,所有可以操作这种树形结构的机器,都可以很方便的检查行李箱中得东西。这种模块就类似于DOM。
那么,HTML可以看做是结构性的文本,然后可以将其抽象为DOM类型的模型,这样所有的程序处理模块只要能够处理DOM,那么就可以处理HTML。
总之,你也可以自己通过自己定义的方法去操作HTML文本,但是基于DOM的操作会更加方便,因为你不需要考虑HTML文本的内容格式,你只需要关心结构良好的DOM文档,并且现成的开发接口提供了丰富的DOM操作接口。
如何将HTML String 转换为 dom 元素
前一段时间因为需求,所以把这方面的资料自己查询规整了一下,以备后用。
DOMParser
对于开发者来说,我们”期盼”的最好的方式当然是原生的浏览器支持,就像下面这样
1: var parser = new DOMParser();
2: var doc = parser.parseFromString(“<input />”, “text/html”);
Tips:
parseFromString 返回的并不仅仅是一个 input 元素的 node, 而是一个完整的 Document
这里是支持 script 标签的, 但是当解析出的 dom 被添加到页面时,script是不会被执行的
最好保证格式良好,否则可能并不会展现如我们预期的 dom 结构
遗憾的是,DOMParser 对 HTML 的解析仅仅得到了 Firefox 12+, IE 10+ 的支持,其余的浏览器均不支持,所以我们要寻求浏览器兼容性更好的方法
InnerHTML
用 javascript 写一个简易的 parser 其实并不是很难,基本的雏形就像下面这样
1: (function (DOMParser) {
2: “use strict”;
3:
4: var
5: DOMParser_proto = DOMParser.prototype,
6: real_parseFromString = DOMParser_proto.parseFromString;
7:
8: // Firefox/Opera/IE throw errors on unsupported types
9: try {
10: // WebKit returns null on unsupported types
11: if ((new DOMParser).parseFromString(“”, “text/html”)) {
12: // text/html parsing is natively supported
13: return;
14: }
15: } catch (ex) {}
16:
17: DOMParser_proto.parseFromString = function (markup, type) {
18: if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
19: var
20: doc = document.implementation.createHTMLDocument(“”);
21: if (markup.toLowerCase().indexOf(‘<!doctype’) > -1) {
22: doc.documentElement.innerHTML = markup;
23: } else {
24: doc.body.innerHTML = markup;
25: }
26: return doc;
27: } else {
28: return real_parseFromString.apply(this, arguments);
29: }
30: };
31: }(DOMParser));
真正在使用时,我们可能不希望返回的是一个完整的 Document, 而仅仅是一个 html 片段,那采用下面的代码也许更方便
1: function parseStringToHTML(text) {
2: var i, a = document.createElement(“div”),
3: b = document.createDocumentFragment();
4: a.innerHTML = text;
5: while (i = a.firstChild) b.appendChild(i);
6: return b;
7: }