Dom课件.ppt
- 文档编号:18733695
- 上传时间:2023-10-22
- 格式:PPT
- 页数:79
- 大小:325KB
Dom课件.ppt
《Dom课件.ppt》由会员分享,可在线阅读,更多相关《Dom课件.ppt(79页珍藏版)》请在冰点文库上搜索。
第二节DOM编程,DHTMLwindow对象document对象body对象form对象form表单字段元素对象,DHTML,1.JAVASCRIPT将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示,这些对象及对象之间的层次关系称为DOM(DocumentObjectModel,文档对象模型)。
2.css、脚本编程语言和DOM的结合使用,能够使HTML文档与用户具有交互性和动态变换性,这三种技术的单一称谓叫DHTML(DynamicHTML,动态HTML).,事件,事件:
用户对浏览器所做的特定的动作(操作),是实现交互操作的一种机制。
事件处理程序:
浏览器响应某个事件,实现用户的交互操作而进行的处理(过程)。
事件处理程序的调用:
浏览器等待用户的交互操作,并在事件发生时,自动调用事件处理程序(函数),完成事件处理过程。
Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove,如何编写事件处理程序,一、在事件源对象所对应的HTML标签上增加一个要处理事件属性,让事件属性值等于处理事件的函数名或程序代码。
格式:
|”,例1:
例2:
functionshow()varstr=建议浏览器的分辨率:
800x600;alert(str);,二、直接在JavaScript代码中,设置元素对象的事件属性,让事件属性值等于处理该事件的函数名或程序代码。
格式:
对象名.on事件=|例1:
document.onload=alert(建议浏览器的分辨率:
800x600);varstr=建议浏览器的分辨率:
800x600;document.onload=alert(str);例2:
functionshow()varstr=建议浏览器的分辨率:
800x600;alert(str);document.onload=show();,例1:
请输入基本资料:
姓名:
例2:
functionhandelError(img)msg=有一图文件,名为:
+img.name+n无法顺利显示,请通知系统管理人员+,敬备薄礼相送。
;alert(msg);,例3:
varurl=newArray(3);url0=http:
/www.yam.org.tw/;url1=http:
/=http:
/goto(i)location=urli;搜寻引擎蕃薯藤奇摩中文雅虎/table,window对象,window对象代表浏览器的整个窗口,编程人员可以利用window对象控制浏览器窗口的各个方面,如改变状态栏上的显示文字、弹出对话框、移动窗口的位置等。
对window对象的属性和方法的引用,可以省略“window.”这个前缀,例如,window.alert(你好)可以直接写成alert(你好)。
window对象方法,alert方法confirm方法prompt方法navigate方法setInterval方法setTimeout方法clearInterval方法clearTimeout方法moveTo方法resizeTo方法open方法showModalDialog方法showModelessDialog方法,window对象方法举例,window.alert(你好);window.confirm(你好吗?
);window.alert(你好);if(window.confirm(你好吗?
)window.alert(你好);elsewindow.alert(你不好);,定时器:
(延迟器),用以指定在一段特定的时间后执行某段程序。
setTimeout():
(1.0版)格式:
定时器对象名=setTimeout(“”,毫秒)功能:
执行一次。
例1:
functioncount()setTimeout(alert(三秒到了),3000),setInterval():
(1.2版)格式:
定时器对象名=setInterval(“”,毫秒)功能:
重复执行,直至窗口、框架被关闭或执行clearInterval。
clearInterval():
终止定时器格式:
clearInterval(定时器对象名),例1:
varsec=0;timerID=setInterval(count(),1000);functioncount()num.innerHTML=sec+;停留时间:
0秒钟,test.html网页文件:
window.open(information.html,_blank,top=0,left=0,width=200,height=200,toolbar=no);information.html网页文件:
window.setTimeout(window.close(),5000);通知5秒钟以后,这个窗口会自动关闭!
test.html网页文件:
(全屏)window.open(information.html,_blank,top=0,left=0,toolbar=no,fullscreen=yes,titlebar=no);,nformation.html网页文件:
(增大)window.setTimeout(window.close(),5000);window.setInterval(grow(),100);functiongrow()window.resizeBy(5,5);通知5秒钟以后,这个窗口会自动关闭!
window对象属性,-closed属性-opener属性-defaultstatus属性-status属性-screenTop属性-screenLeft属性,window.html关闭子窗口varchild=window.open(information.html,_blank,top=0,left=0,toolbar=no,fullscreen=yes,titlebar=no);functioncloseChild()if(!
child.closed)child.close();,(关闭子窗口时)文本在状态栏上显示/setInterval(scroll(),100);varspace_num=0;vardir=1;functionscroll()space_num=space_num+1*dir;if(space_num40|space_num=0)dir=-1*dir;,for(vari=0;i,information.htmlwindow.setTimeout(window.close(),5000);window.setInterval(grow(),100);functiongrow()window.resizeBy(5,5);functioncloseit()window.close();opener.start();/or/window.setTimeout(window.closeit(),5000);/通知5秒钟以后,这个窗口会自动关闭!
window对象事件,专用事件:
onload事件onunload事件onbeforeunload事件通用事件onclick事件onmousemove事件onmouseover事件onmouseout事件onmousedown事件onmouseup事件onkeydown事件onkeyup事件onkeypress事件,window_event.html2alert(ok2);1helloalert(ok3);alert(ok1);,window对象对象属性,location对象event对象frames数组对象screen对象clipboardDate对象history对象navigator对象document对象,window对象location对象window.location.htef=http:
/等效于window.navigate(http:
/,/setTimeout(window.location.href=http:
/cn;,2000);/setTimeout(window.location.replace(http:
/cn);,2000);window.navigate(http:
/);/orwindow.location.href=http:
/;,window对象event对象,altKey属性ctrlKey属性shiftKey属性clientX、clientY属性screenX、screenY属性offsetX、offsetY属性x,y属性returnValue属性cancelBubble属性srcElement属性keyCode属性button属性,eventobject.html按下键盘事件functionwindow_onkeypress()alert(window.event.keyCode);-,按esc关闭窗口functionwindow_onkeypress()/alert(window.event.keyCode);if(window.event.keyCode=27)window.close();,其它属性functioncheckCancel()if(window.event.shiftKey)window.event.cancelBubble=true;functionshowSrc()if(window.event.srcElement.tagName.toLowerCase()=img)/IMG要大写alert(window.event.srcElement.src);,Window对象frames数组对象
(1),Window对象的frames属性是一个数组,它与window对象的parent、top等对象属性,都是用于对HTML的帧标签(或)进行编程的javaScript对象。
framedomeo.html,Top.html,/Window.frames.top/Window.frames.bottom/item方法,Window对象frames数组对象
(2),Top.html:
Bottom.html:
Bottom_right.html:
top.a.document.write();parent.parent,Top.htmlBottom_right.htmlTop.a.document.write(“”);/parent,Document对象方法,Write方法writeln方法open方法close方法clear方法getElementById方法getElementByName方法getElementByTagname方法createElement方法createStyleSheet方法,这是最初的内容document.write(这是write方法动态写入的内容);functionupdatedoc()document.writeln(abc);document.writeln(def);document.close();varowin=window.open(,_blank);owin.document.writeln(xyz);owin.document.close();owin.document.write(abc);owin.document.write(def);owin.document.close();,这是最初的内容document.write(这是write方法动态写入的内容);functionupdatedoc()document.writeln(abc);document.writeln(def);document.writeln();document.writeln(functionupdatedoc();document.writeln();document.writeln(document.writeln(abc););document.writeln(document.writeln(def););document.writeln();document.writeln();document.writeln();,/document.close();/*document.writeln(abc);document.writeln(def);document.close();varowin=window.open(,_blank);owin.document.writeln(xyz);owin.document.close();owin.document.write(abc);owin.document.write(def);owin.document.close();*/,Document对象属性,与标签相关的属性alinkColor属性linkColor属性vlinkColor属性bgColor属性fgColor属性描述网页文档信息的属性charset属性defaultCharset属性cookie属性,fileCreatedDate属性fileModifiedDate属性fileSize属性lastmodified属性url属性URLUnencoded属性referrer属性a.Htmlb.htmldocument.referer,functionchangeDoc()document.bgColor=blue;document.fgColor=red;document.alinkColor=yellow;document.vlinkColor=0x00ff00;document.linkColor=gray;这是普通的文本这是一个超链接,Document对象对象属性,Froms数组Anchors数组/nameidjihealinks数组/hrefjiheaimages数组scripts数组applets数组all数组styleSheets数组Body对象Title对象,functioncheckall()varowin=window.open(,_blank);owin.document.write(+all数组中一共有+document.all.length+个元素);for(vari=0;i+document.alli.tagName+);owin.document.writeln();owin.document.close();top1top2paragraph1paragraph2,functioncheckall()varowin=window.open(,_blank);owin.document.write(+all数组中一共有+document.all.length+个元素);for(vari=0;i+document.alli.tagName+);owin.document.writeln();varobjnames=links,forms,anchors,scripts,images;for(varj=0;j+);eval(owin.document.write(objnamesj+数组中一共有+document.+objnamesj+.length);owin.document.write(个元素);varlen=0;eval(len=document.+objnamesj+.length);for(vari=0;i+document.+objnamesj+i.name+);owin.document.writeln();,/*owin.document.write(document.all7.src);owin.document.write(document.all.img1.src);owin.document.write(document.allimg1.src);owin.document.write(document.all.item(img1).src);owin.document.write(document.all.item(7).src);owin.document.write(document.images0.src);owin.document.write(document.images.img1.src);owin.document.write(document.imagesimg1.src);owin.document.write(document.images.item(img1).src);owin.document.write(document.images.item(0).src);*/owin.document.close();top1top2paragraph1paragraph2,functioncheckall()varowin=window.open(,_blank);owin.document.write(document.imagesimg1.src+);owin.document.write(document.images.item(img2).src+);varobjImg=document.images.item(sample);/varobjImg=document.imagessample;if(objImg!
=null)if(objImg.length!
=null)for(vari=0;i);/*elseowin.document.write(objImg.src);*/,访问第一个图像元素的方式;Document.images“sample”,0Document.image.item(“sample,0”)作为document属性Document.sample0.srcDocument.img1.src作为window属性Window.sample0.srcSample0.srcWindow.img1.srcImg1.src,标签的属性,Defer属性aaa/deferdocument.write(bbb);cccLanguage属性type属性src属性,Body对象方法举例,appendChild方法functioncreateA()varoa=document.createElement(A);oa.href=http:
/;oa.innerText=“香港即时科研集团;/oa.innerHTML=“香港即时科研集团;document.body.appendChild(oa);下面的超链接是动态产生的香港即时科研集团,Body对象属性,专用属性background属性bgProperties属性text属性topMargin属性bottomMargin属性leftMargin属性rightMargin属性,Body对象属性,通用属性id属性name属性className属性innerText属性innerHTML属性outerText属性outerHTML属性offsetTop属性offsetLeft属性offsetWidth属性offsetHeight属性,clientTop属性clientLeft属性clientWidth属性clientHeight属性scroll属性scrollTop属性scrollLeft属性scrollWidth属性scrollHeight属性,innerText与innerHTML之区别onmouseout=this.innerHTML=innerText与innerHTML之区别innerText与innerHTML之区别outerText与outerHTML之区别onmouseout=p2.outerText=outerText与outerHTML之区别outerText与outerHTML之区别outerText与outerHTML之区别abc,Body对象事件,Onselectstart与onscroll事件将这个文本框设置得很大,以便浏览器窗口中出现滚动条,Body对象对象属性,All数组与style对象-list1item1item2item3list2,functionb1_onclick()if(b1.innerText=+)b1.innerText=-;list1.style.display=block;elseb1.innerText=+;list1.style.display=none;/document.body.all(b1).innerText=+;/document.body.all.b1.innerText=+;/document.body.all.item(b1).innerText=+;,在网页上实现图标的漂浮移动,将这个文本框设置得很大,以便浏览器窗口中出现滚动条,vardirX=1,dirY=1;varxPos=0,yPos=0;/为开阔读者的知识面,下面使用了多种形式来引用float_icon对象float_icon.style.top=0;document.body.all.float_icon.style.left=0;document.body.all(float_icon).style.visibility=visible;window.setInterval(moveIcon(),100);functionmoveIcon()/每次移动2个像素xPos+=2*dirX;yPos+=2*dirY;float_icon.style.top=yPos+document.body.scrollTop;float_icon.style.left=xPos+document.body.scrollLeft;/*下面代码实现当图标碰到到窗口边界时,改变图标移动的方向。
如果图标左边位置加上图标宽度的结果大于窗体客户区宽度,就表示图标已碰到窗口右边界*/if(xPos=document.body.clientWidth)dirX=-dirX;if(yPos=document.body.clientHeight)dirY=-dirY;,Form对象,Form对象最主要的功能就是能够直接访问HTML文档中的form表单。
一个web页面可以有一个或多个from表单,使用document.froms数组对象可以访问到各from表单。
可以将对象的属性,来引用该表单字段元素所对应的对象。
Form对象方法,Submit方法,该方法是from对象的专用方法,用向www服务器递交表单数据,模拟用户点击按钮的效果,但该方法不产生onsubmit事件。
Item方法,返回代表form表单中的某个表单字段元素所对应的对象,接受的参数可以是表单字段元素的名称,也可以是表单字段元素在form表单中的索引序号。
Item方法不能返回类型的表单字段元素。
Form对象属性,nametargettitleenctypencodingmethodaction,functionsimu_submit()/用form名称直接引用form对象form1.method=get;/*将form名称作为document对象的属性来引用form对象,并用user作为form对象的属性来引用名为user的文本输入框元素对象。
*/document.form1.user.value=lisi;/下面的两条语句使用item方法来访问文本输入框元素对象/document.form1.item(user).value=lisi;/document.form1.item(0).value=lisi;/下面的几条语句都是使用forms数组对象来引用其中的form1表单/document.forms.form1.user.value=lisi;document.formsform1.action=http:
/-error递交表单递交表单-,F
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dom 课件