第05章 JavaScript与XHTML文档.pptVIP

Web技术原理及应用Web系统与技术 烟台大学计算机学院 陈智育 内容 5.1 JavaScript的执行环境 5.2 文档对象模型[DOM] 5.3 在JavaScript中访问元素 5.4 事件和事件处理 5.5 处理主体元素的事件 5.6 处理按钮元素的事件 5.7 处理文本框和密码元素的事件 5.9 navigator对象 5.10 DOM树的遍历和修改 5.1 JavaScript的执行环境 与文档结构相对应的对象层次 Window对象表示浏览器显示文档的窗口 Window对象为脚本提供最大的封闭引用环境 所有全局变量都是Window的属性 Window对象的document属性 窗口显示的Document对象的引用 Document对象 forms数组-文档中表单的引用 elements数组-表单中元素的引用 其他: images[]… 5.2 文档对象模型 DOM标准版本 DOM0: 非标准规范; 早期浏览器实现的文档模型版本; 所有JavaScript可用的浏览器都支持 DOM1: 1998年发布, 针对XHTML和XML文档 DOM2: 2000年发布, FX2比IE7支持完整 DOM3: 2004年发布, 最新版本 DOM是一种抽象模型, 定义了XHTML文档和应用程序之间的接口(API) DOM中文档为树状结构 5.2 文档对象模型 JavaScript和DOM的绑定 视文档的元素为对象 元素属性为对象属性, 名称一致 例: type和name为对象的属性 利用DOM, JavaScipt可处理文档相关事件和动态修改元素属性,内容和样式 5.2 文档对象模型 浏览器查看文档的DOM结构 5.2 文档对象模型 浏览器查看文档的DOM结构 IE Develop toolbar 5.2 文档对象模型 浏览器查看文档的DOM结构 IE Webdeveloper v2 5.2 文档对象模型 浏览器查看文档的DOM结构 FX附加组件: DOM Inspector 5.3 在JavaScript中访问元素 几种方式 1. DOM地址(缺点: 文档变化) document.forms[0].element[0] 2. 使用元素name属性(缺点: 需name, 新标准) document.myForm.pushMe 3. 使用getElementById方法(DOM1中定义) document.getElementById(pushMe) 5.3 在JavaScript中访问元素 使用复选框和单选框相关联的隐式数组访问元素 数组名同name属性值 5.4 事件和事件处理 DOM0 事件模型 事件处理的基本概念 事件驱动编程: 检测事件并为这些事件提供相应的计算(代码执行顺序无法预测) 事件(event): 某些特殊情况发生时的通知, 与浏览器或用户操作相关 事件处理程序(handler): 为响应发生的相应事件而执行的脚本代码 事件注册: 将事件处理程序连接到事件的过程 document.write不能用在事件处理程序中 5.4 事件和事件处理 事件,属性和标签 使用事件对应的标签属性, 可将事件和事件处理程序关联起来 这些属性的名称和关联的事件密切相关 鼠标单击 - onclick 按键 - onkeypress … - onxxx P167 表5-1 事件及其标签属性 5.4 事件和事件处理 事件,属性和标签 同一个事件属性可用在多种不同的标签中 例: onclick可用于input, 也可用于a 不同标签可支持的事件属性也不同 例: input支持onclick, 而body不支持 P168 表5-2 事件属性及其标签 常用的事件属性, 可应用的标签, 事件描述 onclick, input, 单击输入元素 5.4 事件和事件处理 事件,属性和标签 注册事件处理程序的两种方式: 将事件处理程序脚本(函数)指派给事件标签属性 input type=“button” onclick=“alert(‘Hello’);” / input type=“button” id=“my” onclick=“hello();” / 对象相关事件属性进行赋值完成注册 document.getElementById(“my”).onclick=hello; 须位于处理程序函数和表单元素后; 仅赋值函数名称 5.5 处理主体元素的事件 body常用事件: load和unload 例: 文档主体加载完成后, 弹出一个警告消息 5.6 处理按钮元素的事件 例: 选择单选按钮, 用对话框显示相应的信息 input type = “radio” … click事件触发调用alert方法 5.6 处