什么是DOM（文档对象模型）
1. DOM（Document Object Model）定义了访问和操作HTML、XHTML和XML文档的标准方法
2. DOM把文档呈现为带有元素、属性和文本的树形结构
3. DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）
为什么要使用DOM
1. 我们可以通过操作DOM来重构整个HTML文档，从而使页面在不刷新的情况下得以动态的改变，比如我们对页面图片的放大缩小就是通过操作DOM而来的
2. DOM被所有浏览器支持，是统一的，不存在兼容性问题
HTML DOM节点
1. DOM是一棵树
2. HTML文档中的每个元素都是一个节点
3. 通过DOM可以访问HTML文档中的每个节点
a) getElementById() ，通过id获取元素
b) getElementsByTagName()，通过标签名称获取元素集合
c) parentNode，获取父节点
d) firstChild，获取第一个子节点
e) lastChild，获取最后一个子节点
window对象（窗口对象，表示浏览器中打开的窗口或一个框架）
1. 杂项
1.1. 每当frame或iframe出现，window对象就会被自动创建
1.2. frames[]，window对象中的框架集合，我们可以通过它来访问各个框架
2. 属性
2.1. document对象（文档对象，后面详细介绍）
2.2. navigator对象（可以访问到浏览器的相关属性与方法，如appName：浏览器名，cookieEnabled：是否启用了cookie）
2.3. screen对象（屏幕对象，包含了屏幕相关属性，如width：屏幕宽度，height：屏幕高度）
2.4. history对象（历史对象，用途不大）
2.5. location对象（地址对象）
2.5.1. href属性：返回文档的地址，同使用location一样
2.5.2. reload()方法：重新加载页面，如果服务器上文档改变则重新下载，否则用缓存
2.6. opener：返回对创建此窗口的窗口的引用
2.7. parent：返回窗口所属的框架页对象，就是父窗口对象（注意与opener的区别）
2.8. top：返回最顶层的窗口对象
2.9. status：窗口下的状态栏
3. 方法
3.1. alert()：弹出消息框
3.2. focus()/blur()：页面获取/丢掉焦点
3.3. open()/close()：打开/关闭一个窗口
3.4. confirm()：弹出带有消息的有确认和取消按钮的对话框
3.5. setTimeout()/clearTimeout()：在指定的时间后调用函数/取消之前的timeout设置
3.6. setInterval()/clearInterval()：按照指定的周期调用函数/取消之前的timeout设置(注意使用方法)
document对象
1. 杂项
1.1. 每个载入浏览器的HTML文档都会成为document对象
2. 对象集合(访问方法有：a.x[0]或a.x[‘name’]或a.name)
2.1. anchors[]：所有链接集合
2.2. forms[]：所有表单集合（后面详说）
2.3. images[]：所有图片集合
3. 属性
3.1. body：提供对<body>元素的直接访问
3.2. cookie：设置或返回与当前文档有关的cookie
4. 方法
4.1. getElementById() ，通过id获取元素
4.2. getElementsByName()，通过标签名称获取元素集合
4.3. getElementsByTagName()，通过标签名称获取元素集合
DOM常用对象（及其常用属性）
1 框架对象
1.1 frame：html框架
1.1.1 id
1.1.2 frameBorder：是否显示框架的边框
1.1.3 noResize：框架是否可调整大小
1.1.4 src：框架加载的页面url
1.2 frameset：html框架集
1.2.1 id
1.2.2 cols：设置或返回框架集中列的数目
1.2.3 rows：设置或返回框架集中行的数目
1.3 iframe：浮动框架
1.3.1 id
1.3.2 align：根据周围文字排列iframe
1.3.3 width/height：宽度/高度
1.3.4 src：浮动框架加载页面的url
2 表单对象
2.1 input type=button：按钮
2.1.1 id
2.1.2 disabled：是否禁用
2.1.3 value：按钮文本
2.2 input type=checkbox：复选框
2.2.1 id
2.2.2 checked：是否被选中
2.2.3 disabled：是否禁用
2.2.4 value：复选框文本
2.3 input type=radio：单选框
2.3.1 id
2.3.2 checked：是否被选中
2.3.3 disabled：是否禁用
2.3.4 value：单选框文本
2.4 input type=hidden：隐藏控件
2.4.1 id
2.4.2 value：隐藏控件的值
2.5 input type=password：密码输入控件
2.5.1 id
2.5.2 disabled：是否禁用
2.5.3 value：控件的值
2.6 input type=submit：提交按钮
2.6.1 id
2.6.2 disabled：是否禁用
2.6.3 value：按钮文本
2.7 input type=text：文本输入框
2.7.1 id
2.7.2 disabled：是否禁用
2.7.3 value：文本框中的值
2.8 textarea：可输入多行的文本
2.8.1 id
2.8.2 cols/rows：宽度/高度
2.8.3 disabled：是否禁用
2.8.4 value：文本框中的值
2.9 select：下拉列表
2.9.1 id
2.9.2 length：下拉列表中的选项数目
2.9.3 multiple：是否选择多个项目
2.9.4 selectedIndex：被选中项的索引
2.9.5 options[]：下拉列表下所有项的集合
2.9.5.1 Option：下拉列表中的一个项（注意大小写）
2.9.5.1.1 id
2.9.5.1.2 disabled：是否禁用
2.9.5.1.3 index：索引号
2.9.5.1.4 selected：是否被选中
2.9.5.1.5 text：文本
2.9.5.1.6 value：值
3 其它常用对象
3.1 image：图片
3.1.1 id
3.1.2 width/height：宽度/高度
3.1.3 complete：图象是否加载完成
3.1.4 src：图象地址
3.2 table：表格
3.2.1 id
3.2.2 cellPadding：内容和单元格之间的空白
3.2.3 cellSpacing：单元格之间的空白
3.2.4 tbody：表格主体，一般不使用，注意：.net中gridview生成的table会有tbody
3.2.5 rows[]：行元素集合
3.2.5.1 id
3.2.5.2 rowIndex：行索引
3.2.6 cells[]
3.2.6.1 id
3.2.6.2 cellIndex：列索引
3.2.6.3 rowSpan/colSpan：单元格所跨的行/列数
注意：.net封装的控件所生成的代码有所不同，不能想当然的觉得生成的代码会怎样怎样，最好先将生成的代码结构看过一遍再做操作，以避免不必要的错误浪费时间。
什么是HTML DOM EVENT对象
网页页面的变化是由事件驱动的，比如当我们将鼠标移动到某个链接上时，这个链接的颜色变了，这时是使用了事件event。
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！
事件句柄（常用事件）
1 页面事件
1.1 load事件：页面完全加载时触发
1.2 focus事件：获取焦点时触发
1.3 blur事件：失去焦点时触发
1.4 change事件：改变输入的值时触发
2 鼠标事件
2.1 click事件：鼠标单击时触发
2.2 dblclick事件：鼠标双击时触发
2.3 mousedown事件：鼠标时触发
2.4 mouseup事件：鼠标时触发
2.5 mousemove事件：鼠标时触发
2.6 mouseover事件：鼠标时触发
2.7 mouseout事件：鼠标时触发
3 键盘事件
3.1 keydown事件：键盘时触发
3.2 keyup事件：键盘时触发
3.3 keypress事件：键盘时触发
事件属性
1 button：哪个鼠标键被点击
1.1 1：左键
1.2 2：右键
1.3 只有click、mousedown、mouseup事件触发时有该属性
2 clientX/Y：鼠标相对于页面原点水平/垂直坐标
3 screenX/Y：鼠标相对于屏幕原点水平/垂直坐标
扫一扫
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
