浏览器是怎么把html文档解析成DOM结构的

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器是怎么把html文档解析成DOM结构的相关的知识,希望对你有一定的参考价值。

DOM与html文档到底是什么关系,网上找的就不要说了!

浏览器解析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:http://www.w3.org/TR/html4/strict.dtd
4)DOM
解析器输出的树是由DOM元素和属性节点组成的。DOM的全称为:Document Object Model。它是HTML文档的对象化描述,也是HTML元素与外界(如Javascript)的接口。
DOM与标签有着几乎一一对应的关系,如下:
<html>
<body>
<p>hello world</p>
<div><img src="aa.png"/></div>
</body>
</html>
参考技术A 举个例子:

你把html看做是一个装有行李的行李箱,箱子里外会有各种大小的储物空间,储物空间里可以放东西。那么,这个装有行李的箱子就可以看是html文档,各个储物空间类似于html的闭合的标签,比如<div></div>,箱子里的衣服看做是某个标签中得数据,比如某个标签中的字符串"HELLO WORLD"。

假设,全球范围内需要使用一种“机器”对过安检的箱子进行检查,检查过程为:打开箱子,分别去各个储物空间把东西拿出来,检查完毕后再把东西放进去。
为了便于各种类型的“机器”能方便的检查行李箱,人类提出了一种可供机器使用的模块,这种模块可以把箱子抽象为一种类似于树的数据结构,所有可以操作这种树形结构的机器,都可以很方便的检查行李箱中得东西。这种模块就类似于DOM。

那么,HTML可以看做是结构性的文本,然后可以将其抽象为DOM类型的模型,这样所有的程序处理模块只要能够处理DOM,那么就可以处理HTML。

总之,你也可以自己通过自己定义的方法去操作HTML文本,但是基于DOM的操作会更加方便,因为你不需要考虑HTML文本的内容格式,你只需要关心结构良好的DOM文档,并且现成的开发接口提供了丰富的DOM操作接口。本回答被提问者采纳

Dom

本文很多内容来自阮一峰的教程;仅做学习,无商业用途;

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。

浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。所以,DOM 可以理解成网页的编程接口。

节点

DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

1 Document:整个文档树的顶层节点
2 DocumentType:doctype标签(比如<!DOCTYPE html>3 Element:网页的各种HTML标签(比如<body><a>等)
4 Attribute:网页元素的属性(比如class="right")
5 Text:标签之间或标签包含的文本
6 Comment:注释
7 DocumentFragment:文档的片段

这七种节点都属于浏览器原生提供的节点对象的派生对象,具有一些共同的属性和方法

节点树

一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是DOM。

最顶层的节点就是document节点,它代表了整个文档。文档里面最高一层的HTML标签,一般是<html>,它构成树结构的根节点(root node),其他HTML标签节点都是它的下级。

除了根节点以外,其他节点对于周围的节点都存在三种关系。

  • 父节点关系(parentNode):直接的那个上级节点
  • 子节点关系(childNodes):直接的下级节点
  • 同级节点关系(sibling):拥有同一个父节点的节点

DOM提供操作接口,用来获取三种关系的节点。其中,子节点接口包括firstChild(第一个子节点)和lastChild(最后一个子节点)等属性,同级节点接口包括nextSibling(紧邻在后的那个同级节点)和previousSibling(紧邻在前的那个同级节点)属性。

特征相关的属性

所有节点对象都是浏览器内置的Node对象的实例,继承了Node属性和方法。这是所有节点的共同特征。

以下属性与节点对象本身的特征相关。

Node.nodeName,Node.nodeType

nodeName属性返回节点的名称,nodeType属性返回节点类型的常数值。具体的返回值,可查阅下方的表格。

以上是关于浏览器是怎么把html文档解析成DOM结构的的主要内容,如果未能解决你的问题,请参考以下文章

回流和重绘

JS的回流和重绘

DOM简介

Dom

回流和重绘

关于DOM