Dom.ppt

第二节 DOM编程 DHTML window对象 document对象 body对象 form对象 form表单字段元素对象 DHTML 1. JAVASCRIPT将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示，这些对象及对象之间的层次关系称为DOM（Document Object Model, 文档对象模型）。 2. css、脚本编程语言和DOM的结合使用， 能够使HTML文档与用户具有交互性和动态变换性， 这三种技术的单一称谓叫DHTML（Dynamic HTML, 动态HTML）. 事件 事件： 用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。 事件处理程序： 浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。 事件处理程序的调用： 浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。 Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove 如何编写事件处理程序 一、 在事件源对象所对应的HTML标签上增加一个要处理事件属性，让事件属性值等于处理事件的函数名或程序代码。 格式：tag on事件=“语句组|函数名” 例1： body onload=alert(建议浏览器的分辨率：800x600);body onload=var str=建议浏览器的分辨率：800x600;alert(str); 例2：script function show(){??? var str=建议浏览器的分辨率：800x600;??? alert(str);}/scriptbody onload=show(); html head script !-- function hideContextmenu() { window.event.returnValue=false; } //-- /script /head body oncontextmenu=hideContextmenu() /body /html html head script !-- function hideContextmenu() { return false; } //-- /script /head body oncontextmenu=return hideContextmenu() /body /html 二、直接在JavaScript代码中， 设置元素对象的事件属性， 让事件属性值等于处理该事件的函数名或程序代码。 格式：对象名.on事件=语句|函数名 例1： document.onload=alert(建议浏览器的分辨率：800x600); var str=建议浏览器的分辨率：800x600; document.onload=alert(str); 例2：script function show(){??? var str=建议浏览器的分辨率：800x600;??? alert(str);}document.onload=show();/script 例1： BodyFORM请输入基本资料：BR姓名：INPUT TYPE=text NAME=usr SIZE=8INPUT TYPE=button VALUE= 请单击 onClick=alert(谢谢你的填写...)/Body 例2：Scriptfunction handelError(img){??? msg = 有一图文件，名为： \ + + \\n无法顺利显示，请通知系统管理人员 + ，敬备薄礼相送。;??? alert(msg);}/Script IMG SRC=abc.gif NAME=中国电信的广告 onError=handelError(this) 例3：Script var url = new Array(3);url[0] = .tw/;url[1] = /;url[2] = /; function goto(i) {??? location = url[i];} /Script table width=250trtdformfieldsetlegend搜寻引擎/legendinput name=go type=radio onClick=goto(0)蕃薯藤input name=go type=radio onClick=goto(1)奇摩input name=go type=radio onClick=