HTML DOM及事件

来源：互联网发布：淘宝店铺月销量减少编辑：程序博客网时间：2024/06/05 16:41

什么是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：鼠标相对于屏幕原点水平/垂直坐标

0 0