JavaScript软件基础知识：第四章 JavaScript使用DHTML或DOM元素

第四章JavaScript使用DHTML/DOM元素JavaScript软件基础知识DHTML介绍...DHTML的定义使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTMLDHTML是一种浏览器端的动态网页技术...DHTML介绍DHTML的功能动态改变字体大小和字体颜色动态设定文档元素的位置、内容，甚至隐藏和显示元素可以通过事件响应机制制作动态折叠的树形结构和菜单可以通过定时器制作时钟、日历可以弹出对话框与用户进行交互可以通过表单提交用户填写的信息通过动态样式表可以设定更多的显示效果...DHTML对象模型...DHTML对象模型（DOM）将HTML标记、属性和CSS样式都对象化可以动态存取HTML文档中的所有元素可以使用属性name或id来存取或标记对象改变元素内容或样式后浏览器中显示效果即时更新DHTML对象模型包括浏览器对象模型和Document对象模型...DHTML对象模型...WindowFramesHistoryNavigatorDocumentLocationEventFormTableAnchorImageIframeTableRowTableCellInputSelectTextarea......DHTML对象模型DHTMLDOM与W3CDOM的比较比较项目DHTMLDOMW3CDOM概念DHTML中的Document对象模型标准的树形结构文档操作接口浏览器支持IE4.0以上IE5.0以上实现方法对象数组Document.all树形节点对象Node.Element操作语言JavaScriptJavaScript、Java、C++等文档对象HTMLHTML、XMLWindow对象...常用属性名称功能说明document对象，代表窗口中显示的HTML文档frames窗口中框架对象的数组history对象，代表浏览过窗口的历史记录location对象，代表窗口文件地址，修改属性可以调入新的网页defaultStatus,status窗口的状态栏信息closed窗口是否关闭，关闭时该值为truename窗口名称，用于标识该窗口对象...Window对象...常用属性名称功能说明opener对象，是指打开当前窗口的window对象，如果当前窗口被用户打开，则它的值为nullparent对象，当前窗口是框架页时指的是包含该框架页的上一级框架窗口top对象，当前窗口是框架页时指的是包含该框架页的最外部的框架窗口self对象，指当前Window对象window对象，指当前Window对象，同self...Window对象...常用方法名称功能说明alert(),confirm,prompt()弹出简单对话框close(),open()关闭、打开窗口print()打印窗口中网页的内容focus(),blur()请求或放弃窗口为当前操作窗口moveBy(),moveTo()移动窗口resizeBy(),resizeTo()调整窗口大小scrollBy(),scrollTo()滚动窗口中网页的内容setInterval(),clearInterval()设置或取消周期执行的定时器setTimeout(),clearTimeout()设置或取消一次性执行的定时器...Window对象主要功能窗口的打开和关闭对话框状态栏定时器内容滚动调整窗口大小和位置Screen对象History对象Navigator对象Location对象窗口的打开和关闭...书写格式功能说明window.open(url,name,config)打开新窗口url为打开的超链接name为窗口的名称config为窗口的配置参数返回新窗口对象window.close()关闭窗口...窗口的打开和关闭...config参数具体元素menubar菜单条toolbar工具条location地址栏directories链接status状态栏scrollbars滚动条resizeable可调整大小width窗口宽，以像素为单位height窗口高，以像素为单位参数值为yes或no参数值为数字值...窗口的打开和关闭程序示范：打开google搜索窗口varconfig='menubar=yes,toolbar=no,location=no,';config+='directories=no,status=yes,';config+='scrollbars=yes,resizable=yes,';config+='width=500,height=300';varopenurl=(openurl,popwin,config);//仅仅打开窗口varmywin=window.open(openurl,popwin,config);mywin.close();//关闭打开的窗口对话框分类对话框简单对话框窗口对话框alert提示框confirm确认框prompt输入框showModalDialog(IE4.0)showModelessDialog(IE5.0)简单对话框...书写格式功能说明alert(str)提示对话框，显示str字符串的内容按[确定]关闭对话框confirm(str)确认对话框，显示str字符串的内容按[确定]按钮返回true，[取消]返回falseprompt(str,value)输入对话框，采用文本框输入信息按[确定]按钮返回输入值，[取消]关闭...简单对话框...显示效果比较：alert(您好！);confirm(您好吗？);prompt(您贵姓？,陈);...简单对话框返回值比较：varfirstname=prompt(您贵姓？,陈);if(confirm(您确定？)==true){alert(firstname+先生，您好！);}不返回值返回值为输入字符串返回值为true或false窗口对话框...书写格式功能说明showModalDialog(url,arguments,config)IE4或更高版本支持该方法showModelessDialog(url,arguments,config)IE5或更高版本支持该方法参数说明url打开链接arguments传入参数config窗口配置参数...窗口对话框...config外观配置参数status状态栏resizable可调整大小help是否显示标题栏中的按钮center是否显示在桌面正中间dialogWidth对话框宽dialogHeight对话框高dialogTop对话框左上角的y坐标dialogLeft对话框左上角的x坐标参数值为yes或no值为数字单位为像素...scriptlanguage=javascriptfunctionshowDialog(){varconfig='dialogWidth:320px;dialogHeight:180px;';config+='dialogTop:140px;dialogLeft:250px;';config+='center:no;help:no;resizable:no;status:no';showModalDialog(test4-1a.htm,input1,config);}/scriptinputtype=textid=input1value=readonlyinputtype=buttonid=selectBtnonclick=showDialog()value=选择日期......窗口对话框...程序示范：调用窗口对话框的方法传入input1对象scriptlanguage=javascript//确定按钮事件，更新输入框中的值functionok(){vartheInput=dialogArguments;...theInput.value=theYear+-+theMonth+-+theDate;window.close();}/scriptinputtype=buttonname=okbtnvalue=确定onclick=ok()...窗口对话框...程序示范：窗口对话框页面的编写设置传入对象input1的值...窗口对话框...运行结果：选择日期对话框调用页被调用对话框状态栏书写格式功能说明window.status状态栏中的字符串信息允许进行设置或读取window.status=hello;varstr=您好！今天是+(newDate()).toLocaleString();window.status=str;定时器...书写格式功能说明tID=setInterval(exp,time)周期性触发执行代码expexp为字符串格式的执行语句time为时间周期，单位为毫秒返回已经启动的定时器clearInterval(tID)停止启动的定时器tID=setTimeout(exp,time)一次性触发执行代码expexp为字符串格式的执行语句time为间隔时间，单位为毫秒返回已经启动的定时器clearTimeout(tID)停止启动的定时器...定时器...定时器的实际运用网页动态时钟制作倒计时跑马灯效果幻灯片效果自动滚屏阅读制作网页小游戏……...vartimmerID=null;functionupdateTime(){//更新状态栏显示当前时间varnow=(newDate()).toLocaleString();window.status=当前时间：+now;}functionmystart(){//启动定时器timmerID=window.setInterval(updateTime(),1000);}functionmystop(){//停止定时器window.clearInterval(timmerID);}//调用timeStart();......定时器...程序示范：网页动态时钟(采用setInterval)mystartmystopupdateTime...定时器...程序示范：网页动态时钟(采用setTimeout)...vartimmerID=null;functionupdateTime(){//更新状态栏显示当前时间varnow=(newDate()).toLocaleString();window.status=当前时间：+now;mystart();}functionmystart(){//启动定时器timmerID=window.setTimeout(updateTime(),1000);}functionmystop(){//停止定时器window.clearTimeout(timmerID);}...mystart();mystartmystopupdateTime...定时器运行结果：网页动态时钟状态栏中的时间信息将每秒种刷新一次内容滚动...书写格式功能说明window.scroll(x,y)滚动窗口到指定位置单位为像素window.scrollTo(x,y)同scroll方法window.scrollBy(ax,ay)从当前位置开始，向右滚动ax像素，向下滚动ay像素...内容滚动程序示范：自动滚屏阅读...vartimmerID=null;functionupdateScroll(){//更新滚动位置window.scrollBy(0,1);}functionmystart(){//启动定时器timmerID=window.setInterval(updateScroll(),100);}functionmystop(){//停止定时器window.clearInterval(timmerID);}...mystartmystopupdateScroll调整窗口大小和位置...书写格式功能说