01 DOM 概述
By Kevin Song
DOM(Document Object Model)文档对象模型:用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签,文本,属性等)封装成对象。
- 文档:标记型文档
- 对象:封装了属性和行为的实例,可以被直接调用
- 模型:所有标记行文档都具备一些共性特征的一个体现
目的:更方便操作这些文档和文档中的所有内容
常见的标记型文档:HTML XML
DOM解析方式(w3c标准):按照标签的层次关系,将标记型文档解析成DOM树,树中内容封装成节点对象
- 优点:可以对树中节点进行任意操作,比如增删改查
- 缺点:这种解析需要把整个标记行文档加载进内存,如果标记型文档体积很大,则浪费空间
SAX解析方式(民间标准):基于事件驱动的解析
- 优点:获取数据的速度贼快
- 缺点:不能对标签进行增删改查
<html>
<head>
<title>演示文档</title>
</head>
<body>
<div>div区域</div>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<table>
<tbody>
<tr>
<th>表头</th>
<tr>单元格</tr>
</tr>
</tbody>
</table>
<form>
<input type="text" />
</form>
</body>
</html>
DOM树:树种的标签,文本,属性,称为节点。也称为对象
DOM三级模型
- DOM level 1: 将html文档封装成对象
- DOM level 2:在Lv1基础上加入新功能,比如解析名称空间
<html>
<body>
<html xmlns="http://www.baidu.com">
<table></table>
</html>
<html xmln="http://www.sina.com.cn">
<table></table>
</html>
</body>
</html>
- DOM Level 3:将xml文档封装成了对象
DHTML(Dynamic HTML):多项技术综合体的简称
- HTML:标签封装
- 提供标签,对数据进行封装,便于对该标签中的数据进行操作
- CSS:样式定义
- 提供样式属性,对标签中的数据进行样式的定义
- DOM:封装对象
- 将标签型文档和文档中的所有内容进行解析并封装成对象,在对象中定义了更多的属性和行为,便于对对象的操作
- JavaScript:行为定义
- 程序设计语,对页面中的对象进行逻辑操作
AJAX = DHTML + XMLhttpRequest