javascript实用技术-DOM操作.ppt

JavaScript实用技术-DOM操作 本讲目标 理解DOM的概念 掌握DOM中对象的使用 Window Document JavaScript 中的通用事件 处理表单对象及表单元素事件 使用表单对象及表单元素校验用户输入 DOM的概念 Javascript将浏览器本身、网页文档以及网页中的html元素用相应的内置对象来表示，其中的一些对象是作为另外的一些对象的属性而存在的，这些对象以及对象间层次的关系称为DOM（document object model）文档对象模型。 在脚本程序中访问这些DOM对象，就可以操作网页中的各个元素，从而控制浏览器和网页元素的行为外观。 通用浏览器对象 文档对象模型 Window对象 窗口对象的事件(onload和onunload ) 窗口对象的方法：open() 、alert() 、confirm() 、prompt() 、setTimeout()、showModalDialog()、showModelessDialog() open()方法的参数，(例1) write()、writeln()输出显示 Document对象 document对象代表浏览器窗口中装载的整个文档，代表HTML元素的对象在javascript中都是作为document对象中直接或间接属性被引用。 document方法包括write,writeln,open,close,clear。 document对象的属性包括文档对象的样式、文档对象的集合、文档中的标记。 Document对象 锚对象集合anchors anchor对象指的是A Name=... /A标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。 链接对象集合links link对象指的是用A Href=... /A标记的连接一个超文本或超媒体的元素作为一个特定的URL。 表单对象集合forms 表单对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document.forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。 Event对象 事件可以由用户生成，也可以由系统生成 每个事件都有与之相关联的Event对象 Event 对象提供下列信息： 事件类型 事件发生时光标的位置 Event 对象可以用作事件处理程序的一部分 Event对象 获取设置当前事件的有关信息，属性包括：altKey、ctrlKey、shitfKey、keyCode等。 通过识别键盘按键的unicode编码来编写程序。window.event.keyCode可以获取键盘按键的编码。 处理事件 为响应事件而执行的JavaScript代码段称为事件处理程序 事件处理程序分为： HTML 标记事件处理程序 标记名 eventhandler=“函数名 以属性的形式出现的事件处理程序 object.eventhandler = function; HTML 标记事件处理程序示例 HTML HEAD TITLE我的主页/TITLE SCRIPT LANGUAGE=JavaScript !-- function greeting() { alert(欢迎您来做客); } -- /SCRIPT /HEAD BODY onLoad=greeting() /BODY /HTML 以属性的形式出现的事件处理程序示例 HTML HEAD TITLE我的主页/TITLE SCRIPT LANGUAGE=JavaScript !-- function greeting() { alert(欢迎您来做客); } window.onload = greeting; // -- /SCRIPT /HEAD /HTML JavaScript常用事件 onClick onChange onLoad onMouseDown onMouseUp onClick事件示例 HTMLHEAD SCRIPT LANGUAGE=JavaScript !-- function compute(form){ if (confirm(确定吗?)) form.result.value = eval(form.expr.value); else alert(请重试。); }