[工学]第05章 javascript与xhtml文档

《[工学]第05章 javascript与xhtml文档》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web技术原理及应用Web系统与技术烟台大学计算机学院陈智育第5讲JavaScript与XHTML文档内容5.1JavaScript的执行环境5.2文档对象模型[DOM]5.3在JavaScript中访问元素5.4事件和事件处理5.5处理主体元素的事件5.6处理按钮元素的事件5.7处理文本框和密码元素的事件5.9navigator对象5.10DOM树的遍历和修改5.1JavaScript的执行环境与文档结构相对应的对象层次Window对象表示浏览器显示文档的窗口Window对象为脚本提供最大的封

2、闭引用环境所有全局变量都是Window的属性Window对象的document属性窗口显示的Document对象的引用Document对象forms数组-文档中表单的引用elements数组-表单中元素的引用其他:images[]…5.2文档对象模型DOM标准版本DOM0:非标准规范;早期浏览器实现的文档模型版本;所有JavaScript可用的浏览器都支持DOM1:1998年发布,针对XHTML和XML文档DOM2:2000年发布,FX2比IE7支持完整DOM3:2004年发布,最新版本DOM是

3、一种抽象模型,定义了XHTML文档和应用程序之间的接口(API)DOM中文档为树状结构5.2文档对象模型JavaScript和DOM的绑定视文档的元素为对象元素属性为对象属性,名称一致例:type和name为对象的属性利用DOM,JavaScipt可处理文档相关事件和动态修改元素属性,内容和样式5.2文档对象模型浏览器查看文档的DOM结构table2.html5.2文档对象模型浏览器查看文档的DOM结构IEDeveloptoolba

4、r5.2文档对象模型浏览器查看文档的DOM结构IEWebdeveloperv25.2文档对象模型浏览器查看文档的DOM结构FX附加组件:DOMInspector5.3在JavaScript中访问元素几种方式1.DOM地址(缺点:文档变化)document.forms[0].element[0]2.使用元素name属性(缺点:需name,新标准)document.myForm.pushMe3.使用getElementById方法(DOM1中定义)document.getElementById("p

5、ushMe")5.3在JavaScript中访问元素使用复选框和单选框相关联的隐式数组访问元素数组名同name属性值...

6、ue="tomatoes"/>...varnumChecked=0;//计算选中的复选框的数目vardom=document.getElementById("topGroup");for(index=0;index

7、事件(event):某些特殊情况发生时的通知,与浏览器或用户操作相关事件处理程序(handler):为响应发生的相应事件而执行的脚本代码事件注册:将事件处理程序连接到事件的过程document.write不能用在事件处理程序中5.4事件和事件处理事件,属性和标签使用事件对应的标签属性,可将事件和事件处理程序关联起来这些属性的名称和关联的事件密切相关鼠标单击-onclick按键-onkeypress…-onxxxP167表5-1事件及其标签属性5.4事件和事件处理事件,属性和标签同一个事件属性可用

8、在多种不同的标签中例:onclick可用于,也可用于不同标签可支持的事件属性也不同例:支持onclick,而不支持P168表5-2事件属性及其标签常用的事件属性,可应用的标签,事件描述onclick,,单击输入元素5.4事件和事件处理事件,属性和标签注册事件处理程序的两种方式:将事件处理程序脚本(函数)指派给事件标签属性