50JavaScript_――DOM总结

DOM文档对象模型DocumentObjectModelJavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示如：window、document、body、forms这些对象与对象的层次关系称为DOMDHTML(DynamicHTML动态HTML)HTML+JavaScript+CSS+DOM的结合使用称之为DHTMLBOM浏览器对象模型浏览器对象window对象表示浏览器窗口对其属性和方法的引用可以省略window.window对象方法alert()方法显示包含由应用程序自定义消息的对话框confirm()方法返回truefalse显示一个确认对话框，prompt()方法显示一个提示对话框其中带有一条消息和一个输入框确定返回文本框的值取消返回nullclose()方法关闭指定的窗口open()方法打开一个WEB浏览器窗口window.location.href=URL当前窗口打开新窗口覆盖当前窗口window.open（”打开窗口的url”，”窗口名”，”窗口特征”）window.open(about:blank);//open()最简单使用window.open(url,windowName,width=100height=100status=yesmenubar=notoolbar=noresizable=nolocation=yesscrollbars=yes);height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许定时器轮询Window.setTimeout(函数名，指定时间毫秒数)延时执行某个函数执行一次clearTimeout(定时器对象名称)取消执行定时器setInterval(函数名称，时间毫秒数)定时执行指定的函数间隔为多少毫秒数clearInterval(定时器对象名称)取消定时器定时器示例:scripttype=text/javascript//setTimeout(函数名，指定时间毫秒数)延时执行某个函数执行一次//clearTimeout(定时器对象名称)varstart;functionshowName(){document.all[myname].style.display=block;start=setTimeout(hideName(),300);}functionhideName(){document.all[myname].style.display=none;start=setTimeout(showName(),300);}functionstopTime(){if(start!=null){clearTimeout(start);start=null;document.all.btn.value=开始闪烁}else{start=setTimeout(showName(),300);document.all.btn.value=停止闪烁}}/script/headbodyonLoad=showName();inputtype=buttononClick=stopTime();id=btnvalue=停止闪烁/h2Hellofontid=mynamecolor=redstyle=display:none肖总/font/h2/bodyscripttype=text/javascript//setInterval(函数名称，时间毫秒数)定时执行指定的函数间隔为多少毫秒数//clearInterval(定时器名称)取消定时器varnum=0;varmyTimer;functionshow(){document.all.myNum.innerHTML=num++;}functiontestTimer(){if(myTimer!=null){clearInterval(myTimer);num=0;myTimer=null;document.all.btn.value=开始计时;}else{myTimer=setInterval(show,100);document.all.btn.value=停止计时;}}/script/headbodyh2计时：fontid=myNumface=宋体color=red0/font/h2inputtype=buttonname=btnonclick=testTimer();value=开始计时//body/html网页对话框模式对话框和无模式对话框window.showModalDialog(URL,传递变量名，窗口特征)建议传递window对象window.showModelessDialog(URL,传递变量名，窗口特征)子窗口访问父窗口数据使用dialogArguments对象返回到父窗口的值使用returnValuewindow对象的子对象属性：parent对象代表对象层次中的父窗口parent对象仅仅是对子窗口有意义self对象代表对当前窗口或框架的引用top对象代表最顶层的窗口opener对象代表创建当前窗口的源窗口用于确定open方法打开窗口的源窗口location对象代表特定窗口的URL信息location.replace(url)刷新不后退location.href=url加载可后退window.location.reload();history对象用于存储客户端最近访问过的网址清单onClick=javascript:top.mymain.history.forward();=history.go(1)onClick=javascript:top.mymain.history.back(1);=history.go(-1)history.go()刷新表单不提交history.forward()指向浏览器历史列表中的下一个URL，相当于点击浏览器的“前进”按钮history.back()指向浏览器历史列表中的上一个URL，相当于点击浏览器的“后退”按钮window.screen代表浏览器屏幕设置浏览器屏幕varh=screen.Height;//屏幕高度varw=screen.Width;//屏幕宽度window对象属性：window.status代表浏览器状态栏设置状态栏标题window.status=清华IT;window.closed窗口是否关闭window的事件htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titlewindow对象的专有事件演示/titlescriptlanguage=javascripttype=text/javascriptalert(开始加载网页....\n---请注意网页的加载顺序---);/script/head!--window的专有事件:onload在浏览器完成对象的装载后触发事件onunload在对象卸载前立即触发事件onbeforeunload在页面将要被卸载前触发事件window对象的事件处理通过body标签的事件属性来设置的--bodyonload=alert('html文档加载完毕')onbeforeunload=window.event.returnValue='******你确定关闭本窗口******'onunload=alert('拜拜')h2注意网页的加载顺序哦!!!/h2/body/htmlscriptlanguage=javascripttype=text/javascriptalert(加载写在最下面的JavaScript脚本);/scriptdocument对象代表给浏览器窗口中的HTML文档document的属性:scripttype=text/javascriptlanguage=JavaScriptfunctionchange(){document.bgColor=green;document.fgColor=red;//文本前景色document.vlinkColor=0x00ff00;//已访问过的链接文本颜色document.linkColor=gray;//链接文本颜色}functionshowURL(){alert(document.URL);//当前文档Unicode编码的URL地址}/scriptbodyonload=change();h2普通文本/h2ahref=#onclick=showURL();链接/a/bodydocument的方法document.write()document.writeln()document.close()bodyh2开始的内容/h2scripttype=text/javascriptdocument.write(这是document对象写入的内容br);varstr=world;document.write(哈楼,str,javascript,br);document.writeln(mystr=Hello,World,br);document.writeln(mystr)vara=帅哥;document.write(newStr=(a==美女)?东方不败:西门吹雪);document.write(br);functionchangeDoc(){document.writeln(以下是更新后的文档内容br);document.writeln('scriptlanguage=javascript');document.writeln('functionchangeDoc()');document.writeln('{');document.writeln('document.writeln(hello);');document.writeln('document.writeln(world);');document.writeln('}');document.writeln('/scr'+'ipt');//注意这里写法document.writeln('inputtype=buttonvalue=测试document对象onclick=changeDoc();');document.close();//关闭文档输出}/scriptinputtype=buttonvalue=测试document对象onclick=changeDoc();/bodydocument集合属性:document.forms//返回文档中的表单数组document.anchors//获取所有带有name和/或id属性的a对象的集合数组document.images//返回文档中的image的数组document.links//获取文档中所有指定了HREF属性的a对象和所有area对象的集合数组document.all返回对象所包含的元素集合的引用scripttype=text/javascriptwindow.status=清华IT;//设置状态栏文本document.title=演示;functionshow(){alert(文档标题：+document.title);alert(所有指定了href属性的对象集合数组长度:+document.links.length);alert(所有带有name或id属性的a对象的集合数组长度：+document.anchors.l