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

html-css024

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

浏览器解析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>

一、是否可变的区别：

html属性中的值是不变的，dom属性的值是变化的。

二、适用场合不同：

核心DOM适合操作节点，如创建，删除，查找等；HTML DOM适合操作属性，如读取或修改属性的值。

三、两者对象不同：

核心DOM ：

对象：Document,Node,   ElementNode,TextNode,AttributeNode，CommentNode,NodeList

HTML DOM：

对象：image,Table,Form,Input,Select...HTML标签对象化

扩展资料

使用javascript操作DOM属性就是操作javascript对象的属性。javascript对象的属性是不需要声明的。有多种方式可以访问属性，如下：

myImg.src = "xxxxxx" //使用“.”运算符

myImg["src"] = "xxxxxx" // 使用属性访问器

var propName = "src"  myImg[propName] = "xxxxxx" //属性访问器支持变量

注：1）因为提供了属性访问器，所以可以通过下面的方式遍历一个DOM对象的所有属性：

var result = ""

for (var p in myImg){

result += "属性名：" + p + "，属性值：" + myImg[p] + "\n"

}

dom属性是文档对象模型。DOM全称 Document Object Model,它允许脚本(js)控制Web页面、窗口和文档,是W3C组织推荐的处理可扩展标志语言的标准编程接口，DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

dom的意思

dom属性是节点（HTML元素）的值，您能够获取或设置。可通过JavaScript（以及其他编程语言）对HTMLDOM进行访问。所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作比如添加或修改元素。