DOM （Document Object Model，“文档对象模型”），是W3C的web技术标准之一，它将网页标签抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)
由于HTML标签很多，则DOM也很复杂，DOM不仅把HTML标签对象化了，将CSS也对象化了，此外还加了一些新的对象，本课我们不能将DOM的对象全部例举出来，给出其中一小部分，有个大致认识即可。
| DOM对象 | 描述 |
| Represents the body of the document (the HTML body) | |
| HTML表单上的按钮。HTML表单中只要出现了<input type="button">标签，一个Button对象就建立了 | |
| HTML表单中的复选框。只要HTML表单中出现了<input type="checkbox">标签，就会建立起Checkbox对象 | |
| 可用来访问所有在页面中的元素 | |
| 代表事件的状态，比如某个元素的事件发生了，键盘按键的状态，鼠标的位置，鼠标按钮的状态 | |
| 当HTML表单中有<input type="file">,FileUpload对象就建立起来了 | |
| 表单可用于用户信息的输入递交。可代表HTML中的form元素 | |
| 代表了HTML中的框架 | |
| Represents an HTML frameset | |
| 在HTML中的隐藏区域。每当HTML表单中出现<input type="hidden">标签，Hidden对象就建立起来了 | |
| 通过Window对象的history属性所访问的预先确定对象。这个对象由一组URLs所构成。这些URLs是所有用户曾经在浏览器中访问过的URLs。 | |
| HTML的img元素 | |
| HTML的link元素。只能在<head>标签里使用link元素 | |
| Represents an HTML meta element | |
| 代表了HTML表单中的password区域。每当HTML表单中出现<input type="password"> 标签，就会建立该对象 | |
| 代表了HTML表单中的单选按钮。每当表单中出现了<input type="radio">标签，就会建立该对象 | |
| 代表了HTML表单中的reset按钮。每当表单出现了<input type="reset"> 标签就会建立该对象 | |
| Automatically created by the JavaScript runtime engine and it contains information about the client's display screen | |
| 代表了HTML表单中的选择列表。每当表单中出现<select>标签就会建立该对象 | |
| 代表了独立的样式声明。我们可以访问这个对象对象，可要文档或是表单中的元素支持style | |
| 代表了HTML表单中的提交按钮。每当表单中出现<input type="submit"> 标签该对象就建立起来了 | |
| 代表了HTML的表格元素 | |
| 代表了HTML里的td元素 | |
| 代表了HTML里的th元素 | |
| 代表了HTML里的tr元素 | |
| 代表了表单中的文字输入区域。每当表单中出现<input type="text">标签该对象就建立起来了 | |
| 代表了HTML的textarea元素 | |
| 当出现<body>或是<frameset>标签，这个对象就会自动建立起来。 |
上面的大多数对象，在前面学习HTML时都介绍过。这些对象都有各自的属性、方法和事件。
下面将上表中Document对象的一些属性和方法列举出来，Document对象是HTML DOM中最重要的对象。
（1）Document Object Properties(Document对象部分属性)：
| Property | Description |
| bgColor | 设置或返回文档背景颜色 |
| documentElement | 返回文档根部节点的参考 |
| domain | 返回文档的服务器域名 |
| fgColor | Sets or returns the text-color of the document |
| lastModified | 返回文挡最后修改的日期 |
| linkColor | 设置或返回文档中连接的颜色 |
| title | 返回文档的标题 |
| URL | Returns the URL of the current document |
（2）Document Object Methods：（Document对象部分方法）
| Method | Description |
| clear() | 清空所有文档中的元素 |
| close() | 关闭输出流以及发送数据的显示 |
| createElement("tag") | 建立元素 |
| createTextNode("txt") | 建立文字串 |
| focus() | 文档聚焦 |
| getElementsByTagName("tag") | Returns a collection of objects with the specified TAGNAME |
| open() | 为写入打开一份文档 |
| write() | 在文档中写入文字串 |
| writeln("str") | 新行写入 |
（3）Document Object Events对象部分事件
Syntax:document.event_name="someJavaScriptCode"
| Event事件 | Description描述 |
| onClick | 当点击事件发生的时候执行一些代码 |
| onDblClick | 当双击事件发生的时候执行一些代码 |
| onFocus | 当聚焦事件发生的时候执行一些代码 |
| onKeyDown | 当键按住事件发生时执行一些代码 |
| onKeyPress | 当键按下事件发生就执行一些代码 |
| onKeyUp | 当提键事件发生就执行代码 |
| onMouseDown | 当鼠标按住事件发生就执行代码 |
| onMouseMove | 当鼠标移动事件发生就执行代码 |
| onMouseOut | 当鼠标离开事件发生就执行一些代码 |
| onMouseOver | 当鼠标移到上方事件发生就执行代码 |
| onMouseUp | 到鼠标释放就执行代码 |
| onResize | 当改变大小事件发生就执行代码 |
下面再例举TEXT对象的部分属性、事件和方法：
（1）Text 对象部分属性
| Property属性 | Description描述 |
| align | 设置或返回 text field 相对周围文字的对齐方式 |
| defaultValue | 设置或返回 text field的初始值 |
| disabled | 设置或返回 text field是否应该禁用。 |
| form | 返回包含 text field 表单的参考 |
| id | 设置或返回 text field的id(在IE4中这个属性只读) |
| 设置或返回 text field中最大限度字符数 | |
| name | 设置或返回 text field的name |
| readOnly | 设置或返回 text field是否为只读 |
| size | 设置或返回 text field 的大小 |
（2）Text 对象方法
| Method方法 | Description描述 |
| blur() | 取消 text field的聚焦 |
| click() | 模仿鼠标点击 text field |
| 让 text field 获得聚焦 | |
| 选中 text field 的内容 |
（3）Text 对象事件
Syntax:object.event_name="someJavaScriptCode"
语法：对象.事件名称=“一些JS代码”
| Event事件 | Description描述 |
| onBlur | 当 text field失去聚焦的时候执行一些代码 |
| onChange | 当 text field失去聚焦并且它的值发生变动的时候执行一些代码 |
| onClick | 当用户在 text field中用鼠标左键点击时执行一些代码 |
| onFocus | 当 text field获得聚焦的时候执行一些代码 |
| onKeyDown | 在 text field中有键按住的时候执行一些代码 |
| onKeyPress | 当 text field 中有键按下并释放后执行一些代码 |
| onKeyUp | 当 text field 中按键释放则执行一些代码 |
| onSelect | 当 text field里当前选中的内容发生变化时执行一些代码 |
| onSelectStart | 当 text field中一些文字被选中则执行一些代码 |
从上面例举的HTML DOM对象及其属性、方法、事件可以看到，只要有一种面向对象的编程语言，就能够访问这些对象，从而实现强大的客户端网页动态效果。这种编程语言就是下面要介绍的客户端脚本语言。
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
