Web编程基础第7章DOM编程.ppt

正文 正文 正文 谢 谢 Thanks for listening. 第7章 DOM编程 目标 -*- 理解事件的概念 掌握常用事件的使用 理解DOM的概念 理解DOM的结构组成 掌握Window对象属性、方法及事件的使用 掌握Document对象属性和方法的使用 掌握表单对象属性、方法及事件的使用 了解其它DOM对象的常用属性、方法及事件 事件 事件 事件是JavaScript程序处理并响应用户动作的唯一途径 JavaScript对事件的处理分为定义事件和编写事件脚本两个阶段，可以定义的事件类型几乎影响到HTML的每一个元素，如浏览器窗口、窗体文档、图形、链接等 事件 说明 事件 说明 onAbort 用户中断图形装载 onMousemove 鼠标移动 onBlur 元素失去焦点 onMouseover 鼠标移过元素上方 onChange 元素内容发生改变，如文本域中的文本和选择框的状态 onMouseout 鼠标从元素上方移开 onClick 点击鼠标按钮或键盘按键 onMousedown 鼠标按键按下 onDragdrop 浏览器外的物体被拖到浏览器中 onMouseup 鼠标按键抬起 onError 元素装载发生错误 onMove 帧或者窗体移动 onFocus 元素得到焦点 onReset 表单内容复位 onKeydown 用户按下一个键 onResize 元素大小属性发生改变 onKeypress 用户按住一个键不放 onSubmit 表单提交 onKeyup 用户将按下的键抬起 onSelect 元素选中的内容发生改变，如文本域中的文本和下拉选单中的选项 onLoad 元素装载 onUnload 窗口被卸载，也就是离开当前浏览窗口时 -*- DOM特性 DOM特性 DOM是一种与浏览器、平台、语言无关的接口，编程人员通过DOM可以访问页面中其他的标准组件。 DOM解决了Netscape的JavaScript和Microsoft的JavaScript之间的冲突，给予Web设计师和开发者一个标准的方法，让其来访问站点中的数据、脚本和表现层对象。 DOM是以层次结构组织的节点或信息片断的集合。DOM是一种树形的结构，开发人员可在节点树中导航寻找特定信息。解析该结构通常需要加载整个文档，解析完毕后才能够操作节点。 -*- 浏览器对象DOM模型-1 DOM对象模型结构 浏览器对象是一个分层结构，也称为文档对象模型，如下图所示： -*- 浏览器对象DOM模型-2 Window对象 Window对象在层次图中位于最高一层，Document对象、Location对象和History对象都是它的子对象，Window对象中包含的属性是应用于整个窗口的。 Document对象 Document对象在层次图中位于最核心的地位，页面上的对象都是Document对象的子对象，在Document对象中包含的属性是整个页面的属性，如表单对象、背景颜色、标题等。 Location对象 Location对象中包含了当前URL地址的信息。 Navigator对象 Navigator对象中包含了当前使用的浏览器的信息，其中包括客户端浏览器支持的MIME类型信息和所安装的插件信息。 History对象 History对象中包含了客户端浏览器过去访问的URL地址信息。 示例代码如下： -*- window.document.MyForm.MyTextBox.value;//获取表单中数据 Window对象 Window对象 在浏览器中，Window对象是所有对象的根对象，只要打开了浏览器窗口，不管该窗口中是否有打开的网页，当遇到body、frameset或frame元素时，都会自动创建Window对象的实例。 Window对象的主要属性如下表： 属性名 说明 name 可读写属性，表示当前窗口的名称 parent 只读属性，如果当前窗口有父窗口，表示当前窗口的父窗口对象 opener 只读属性，表示产生当前窗口的窗口对象 self 只读属性，表示当前窗口对象 top 只读属性，表示最上层窗口对象 defaultstatus 可读写属性，表示在浏览器的状态栏中显示的缺省内容 status 可读写属性，表示在浏览器的状态栏中显示的内容 -*- Window对象常用方法-1 Window对象的常用方法 方法名 说明 alert() 显示带有一段消息和一个确认按钮的警告框 clearInterval() 取消由setInterval()设置的计时器 clearTimeout() 取消由setTimeout()方法设置的计时器 close() 关闭浏览器窗口 confirm()