JavaScript之HTML DOM 实例.doc

Anchor 对象更改一个链接的文本、URL 以及 target访问 Microsoftfunction changeLink()document.getElementById(myAnchor).innerHTML=访问 W3Schooldocument.getElementById(myAnchor).href=document.getElementById(myAnchor).target=_blank使用 focus() 和 blur()访问 W3Sfunction getfocus()document.getElementById(myAnchor).focus()function losefocus()document.getElementById(myAnchor).blur()向超链接添加快捷键function accesskey()document.getElementById(w3).accessKey=wdocument.getElementById(w3dom).accessKey=dfunction accesskey()document.getElementById(w3).accessKey=wdocument.getElementById(w3dom).accessKey=dW3S （请使用 Alt + w 给该链接赋予焦点）HTML DOM （请使用 Alt + d 为该链接赋予焦点）Document 对象使用 document.write() 向输出流写文本document.write(Hello World!)使用 document.write() 向输出流写 HTMLdocument.write(Hello World!)返回当前文档的标题document.write(document.title)返回当前文档的 URLdocument.write(document.URL)返回当前文档的 referrerdocument.write(document.referrer)返回下载当前文档的服务器域名document.write(document.domain)使用 getElementById()function getValue()var x=document.getElementById(myHeader)alert(x.innerHTML)这是标题点击标题，会提示出它的值。使用 getElementsByName()function getElements() var x=document.getElementsByName(myInput); alert(x.length); 打开一个新的文档，添加一些文本，然后关闭它。function createNewDoc() var newDoc=document.open(text/html,replace); var txt=学习 DOM 非常有趣！; newDoc.write(txt); newDoc.close(); 返回文档中锚的数目第一个锚第二个锚第三个锚document.write(document.anchors.length)返回文档中第一个锚的 innerHTMLdocument.write(document.anchors0.innerHTML)第一个锚第二个锚第三个锚计算文档中表单的数目document.write(文档包含： + document.forms.length + 个表单。)访问集合中的项目您的姓名：您的汽车：document.write(第一个表单名称是： + + )document.write(第一个表单名称是： + document.getElementById(Form1).name + )计算文档中的图像数目document.write(本文档包含： + document.images.length + 幅图像。)Event 对象哪个鼠标按钮被点击？function whichButton(event)var btnNum = event.button;if (btnNum=2) alert(您点击了鼠标右键！) else if(btnNum=0) alert(您点击了鼠标左键！) else if(btnNum=1) alert(您点击了鼠标中键！); else alert(您点击了 + btnNum+ 号键，我不能确定它的名称。); 请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。光标的坐标是？function show_coords(event)x=event.clientXy=event.clientYalert(X 坐标: + x + , Y 坐标: + y)被按的按键的 unicode 是？function whichButton(event)alert(event.keyCode)注释：在测试这个例子时，要确保右侧的框架获得了焦点。在键盘上按一个键。消息框会提示出该按键的 unicode。相对于屏幕，光标的坐标是？function coordinates(event)x=event.screenXy=event.screenYalert(X= + x + Y= + y)在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。shift 键被按了吗？function isKeyPressed(event) if (event.shiftKey=1) alert(The shift key was pressed!) else alert(The shift key was NOT pressed!) 在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。哪个元素被点击了？function whichElement(e)var targif (!e) var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (targ.nodeType = 3) / defeat Safari bug targ = targ.parentNodevar tnametname=targ.tagNamealert(You clicked on a + tname + element.)在文档中点击某个位置。消息框会提示出您所点击的标签的名称。哪个事件类型发生了？function getEventType(event) alert(event.type); 在文档中点击某个位置。消息框会提示出被触发的事件的类型。Form 和 Input 对象更改表单的 action 属性function changeAction()var x=document.getElementById(myForm)alert(Original action: + x.action)x.action=/htmldom/index.aspalert(New action: + x.action)x.submit()名称：返回向服务器发送数据的 HTTP 方法function showMethod() var x=document.getElementById(myForm) alert(x.method) 名称：提示按钮的 id 和 类型 + 禁用按钮function alertId()var txt=Id: + document.getElementById(myButton).idtxt=txt + , type: + document.getElementById(myButton).typealert(txt)document.getElementById(myButton).disabled=true请点击我！选定以及不选定 checkboxfunction check()document.getElementById(myCheck).checked=truefunction uncheck()document.getElementById(myCheck).checked=false一个表单中的若干个 checkboxfunction createOrder()coffee=document.forms0.coffeetxt=for (i=0;icoffee.length;+ i)if (coffeei.checked)txt=txt + coffeei.value + document.getElementById(order).value=您订购的咖啡带有： + txt加奶油加糖块Checkbox - 把文本转换为大写function convertToUcase()document.getElementById(fname).value=document.getElementById(fname).value.toUpperCase()document.getElementById(lname).value=document.getElementById(lname).value.toUpperCase()名：姓：转换为大写使用单选按钮中的 value 属性function check(browser) document.getElementById(answer).value=browser Internet ExplorerFirefoxNetscapeOpera您喜欢的浏览器是：重置表单function formReset()document.getElementById(myForm).reset()姓名：年龄：提交表单function formSubmit()document.getElementById(myForm).submit()名：姓：验证表单function validate()var at=document.getElementById(email).value.indexOf()var age=document.getElementById(age).valuevar fname=document.getElementById(fname).valuesubmitOK=trueif (fname.length10) alert(名字必须小于 10 个字符。) submitOK=false if (isNaN(age)|age100) alert(年龄必须是 1 与 100 之间的数字。) submitOK=false if (at=-1) alert(不是有效的电子邮件地址。) submitOK=false if (submitOK=false) return false 名字（最多 10 个字符）：年龄（从 1 到 100）：电子邮件： 设置和移开文本域上的焦点function setFocus() document.getElementById(text1).focus() function loseFocus() document.getElementById(text1).blur() 选取文本域中的内容function selText()document.getElementById(myText).select() 表单中的下拉列表function favBrowser()var mylist=document.getElementById(myList)document.getElementById(favorite).value=mylist.optionsmylist.selectedIndex.text Internet Explorer Netscape Opera您喜欢的浏览器是：另一个下拉列表function moveNumbers()var no=document.getElementById(no)var option=no.optionsno.selectedIndex.textvar txt=document.getElementById(result).valuetxt=txt + optiondocument.getElementById(result).value=txt0123456789 当达到文本域的最大字符数时跳至下一个域function checkLen(x,y)if (y.length=x.maxLength)var next=x.tabIndexif (nextdocument.getElementById(myForm).length)document.getElementById(myForm).elementsnext.focus()这段脚本在达到文本框的最大长度时跳到下一个文本框：为若干表单域添加快捷键function access()document.getElementById(myName).accessKey=ndocument.getElementById(myPwd).accessKey=pdocument.getElementById(ie).accessKey=idocument.getElementById(fx).accessKey=fdocument.getElementById(myButton).accessKey=b姓名：密码：选择您喜欢的浏览器：Internet ExplorerFirefox（请使用 Alt + accesskey 为不同的表单字段赋予焦点。）Frame、Frameset 以及 IFrame 对象可调整大小和不可调整大小的框架 带有滚动条和不带有滚动条的框架更改两个框架的源跳出框架function breakout() if (window.top!=window.self) window.top.location=/example/hdom/tryjs_breakout.htm 更改两个框架的源function changeSource()document.getElementById(frame1).src=/example/hdom/frame_c.htmldocument.getElementById(frame2).src=/example/hdom/frame_d.htmlImage 对象更改图像的高度和宽度function changeSize()document.getElementById(compman).height=270document.getElementById(compman).width=164更改图像的 srcfunction changeSrc() document.getElementById(myImage).src=/i/eg_smile.gif Location 对象把用户带到一个新的地址function currLocation()alert(window.location)function newLocation()window.location=/index.html重新加载文档function reloadPage()window.location.reload();跳出框架function breakout() if (window.top!=window.self) window.top.location=/example/hdom/tryjs_breakout.htm 锚的数组function linkTo(y)var x=window.open(/example/hdom/anchors.htm,scrollbars=yes,width=250,height=200)x.location.hash=yNavigator检测访问者的浏览器和版本号var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version)document.write(浏览器名称：+ browser)document.write()document.write(浏览器版本：+ version)有关访问者的浏览器的更多信息document.write(浏览器：)document.write(navigator.appName + )document.write(浏览器版本：)document.write(navigator.appVersion + )document.write(代码：)document.write(navigator.appCodeName + )document.write(平台：)document.write(navigator.platform + )document.write(Cookies 启用：)document.write(navigator.cookieEnabled + )document.write(浏览器的用户代理报头：)document.write(navigator.userAgent + )有关访问者的浏览器的全部细节var x = navigator;document.write(CodeName= + x.appCodeName);document.write(MinorVersion= + x.appMinorVersion);document.write(Name= + x.appName);document.write(Version= + x.appVersion);document.write(CookieEnabled= + x.cookieEnabled);document.write(CPUClass= + x.cpuClass);document.write(OnLine= + x.onLine);document.write(Platform= + x.platform);document.write(UA= + x.userAgent);document.write(BrowserLanguage= + x.browserLanguage);document.write(SystemLanguage= + x.systemLanguage);document.write(UserLanguage= + x.userLanguage);根据浏览器来提醒用户function detectBrowser()var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version)if (browser=Netscape|browser=Microsoft Internet Explorer) & (version=4) alert(您的浏览器已经很棒了！)else alert(您的浏览器需要升级了！)Option 和 Select 对象禁用并启用下拉列表function disable() document.getElementById(mySelect).disabled=true function enable() document.getElementById(mySelect).disabled=false 苹果 桃子 香蕉 桔子取得包含该下拉列表的表单的 id 苹果 桃子 香蕉 桔子该表单的 id 是：document.write(document.getElementById(mySelect).form.id)取得下拉列表中选项的数目function getLength() alert(document.getElementById(mySelect).length) 苹果 桃子 香蕉 桔子更改下拉列表中的可见行数function changeSize() document.getElementById(mySelect).size=4 苹果 桃子 香蕉 桔子选择下拉列表中的多个选项function selectMultiple() document.getElementById(mySelect).multiple=true 苹果 桃子 香蕉 桔子输出下拉列表中所有选项的文本function getOptions() var x=document.getElementById(mySelect); var y=; for (i=0;ix.length;i+) y+=x.optionsi.text; y+=; document.write(y); 苹果 桃子 香蕉 桔子取得下拉列表中所选的选项的索引位置functio