二、HTML DOM及事件

什么是DOM(文档对象模型)

1.       DOMDocument Object Model)定义了访问和操作HTMLXHTMLXML文档的标准方法

2.       DOM把文档呈现为带有元素、属性和文本的树形结构

3.       DOM 被分为不同的部分(核心、XMLHTML)和级别(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.          每当frameiframe出现,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        framehtml框架

1.1.1  id

1.1.2  frameBorder:是否显示框架的边框

1.1.3  noResize:框架是否可调整大小

1.1.4  src:框架加载的页面url

1.2        framesethtml框架集

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:表格主体,一般不使用,注意:.netgridview生成的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        只有clickmousedownmouseup事件触发时有该属性

2          clientX/Y:鼠标相对于页面原点水平/垂直坐标

3          screenX/Y:鼠标相对于屏幕原点水平/垂直坐标

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值