文档对象模型DOM--学习笔记

定义

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

DOM树

DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。

DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法，并将对应的文档呈现为带有元素、属性和文本的树结构（节点树）。

1. DOM树定义了HTML/XML文档的逻辑结构，给出了一种应用程序访问和处理XML文档的方法。
2. 在DOM树中，有一个根节点，所有其他的节点都是根节点的后代。
3. 在应用过程中，基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树，应用程序通过对DOM树的操作，来实现对HTML/XML文档数据的操作。

DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。

HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

浏览器接收到代码后进行解析，经过三大步骤：DOM构造、布局以及绘制页面，最终展现为人人都能看懂的网页。

1. DOM构造
   浏览器首先将收到的html代码，通过html解析器解析构建为一颗DOM树。接着将接收到的css代码，通过css解析器构建出样式表规则将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。

2. 布局
   浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上。传送带上的盒子就是节点，而这条流动的传送带就是文档流。
   如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部。根据它在DOM树上的结构，可以嵌套的层级没有限制。
   文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。

3. 绘制页面
   布局完成之后，我们在页面上其实是看不到任何内容的，浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化。因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。

DOM树扩展

根据W3C的定义，DOM树结点的属性包括标记名(nodeName)、结点类型(node Type，取值为TagTxt)、结点内容(data)、父结点对象集合(parent Node)、子结点对象集合(firstChild，lastChild)、兄弟结点对象集合(previous Sibling，nextSibling)等。DOM树结点的这些属性给出了页面的基本内容和结构信息，但不能反映标签、属性以及内容等与主题的相关程度，因而缺乏主题提取所需的语义。对DOM树扩展的总体思路为：考虑HTML页面标签的类别，以及标签属性值对页面主题信息的影响，将这种影响纳入对页面内容要素的计算中，对DOM树结点进行语义扩展，同时引入结点影响度因子来刻画该结点在树中的重要程度。

DOM树结点语义扩展

为了增加DOM树结点与页面主题信息相关程度的语义信息，计算结点内容的重要度，将HTML标签的类别(Category)、非链接文字数(WordNum)、超链接数(LinkNum)、属性集(Attibution)和影响度因子(Influence)等属性添加到结点中，扩展其语义。HTML标签依据其作用可分为5类:

• 描述标题及页面概要信息的标签:如〈title〉、〈meta〉等。
• 规划网页布局的标签:如〈table〉、〈tr〉、〈td〉、〈p〉、〈div〉等，其作用是描述网页内容的布局结构。
• 描述显示特点的标签:如〈b〉、〈I〉、〈strong〉、〈h1〉-〈h6〉等，其作用是强调重点内容，引起人们注意。
• 超链接相关的标签，表示网页间的内容相关性信息。
• 其他标签，如设置图像的标签〈img〉，在文本提取时将忽略这类标签。

根据HTML标签在刻画网页特征时的语义功能，将DOM树结点分为6种类别:标题类(TITLE)、正文类(CONTENT)、视觉类(VISION)、分块类(BLOCK)、超链类(LINK)和其他类(OTHER)，不同类的结点对Web信息提取的重要度不同。

• 标题类(TITLE):指HTML文档中标题标签的专有类别。
• 正文类(CONTENT):指包含网页正文内容的标签类别，如包含文字的〈td〉标签。
• 视觉类(VISION):指描述页面显示特性的标签类别，如〈b〉、〈strong〉等。
• 分块类(BLOCK):指用于网页内容分块的标签类别，如〈table〉、〈tr〉等。
• 超链类(LINK):指包含超链接的标签类别，如〈a〉。
• 其他类(OTHER):指不属于以上5种类别的标签类型。

参考资料：
作者：果冻公开课
链接：https://www.zhihu.com/question/34219998/answer/611326215