Web編程基礎(chǔ) 第7章 DOM編程學(xué)習(xí)資料_第1頁(yè)
Web編程基礎(chǔ) 第7章 DOM編程學(xué)習(xí)資料_第2頁(yè)
Web編程基礎(chǔ) 第7章 DOM編程學(xué)習(xí)資料_第3頁(yè)
Web編程基礎(chǔ) 第7章 DOM編程學(xué)習(xí)資料_第4頁(yè)
Web編程基礎(chǔ) 第7章 DOM編程學(xué)習(xí)資料_第5頁(yè)
已閱讀5頁(yè)，還剩72頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第7章DOM編程

內(nèi)容提要7.4document對(duì)象7.3window對(duì)象7.2JavaScript事件7.1BOM和DOM概述7.7動(dòng)態(tài)操作節(jié)點(diǎn)7.6location對(duì)象7.5history對(duì)象7.1BOM和DOM概述瀏覽器對(duì)象模型（BrowserObjectModel,BOM）是用于描述對(duì)象與對(duì)象之間層次關(guān)系的模型，該模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行交互的對(duì)象結(jié)構(gòu)。BOM也可以稱為窗口對(duì)象模型（WindowObjectModel），當(dāng)瀏覽器打開一個(gè)網(wǎng)頁(yè)文件時(shí)，window對(duì)象對(duì)應(yīng)著瀏覽器窗口本身。瀏覽器對(duì)象模型的層次結(jié)構(gòu)文檔對(duì)象模型（DocumentObjectModel,DOM）是一種用于HTML和XML文檔的編程接口。DOM為文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方法，DOM可以把網(wǎng)頁(yè)、腳本以及其他的編程語(yǔ)言聯(lián)系起來。DOM可以看作是HTML頁(yè)面的模型，是一套對(duì)文檔的內(nèi)容進(jìn)行抽象和概念化的方法。在DOM中，HTML的每個(gè)標(biāo)簽元素被作為一個(gè)對(duì)象。JavaScript通過調(diào)用DOM中的屬性、方法可以對(duì)網(wǎng)頁(yè)中的標(biāo)簽元素進(jìn)行控制。例如讀取頁(yè)面中文本框的值、設(shè)置文本框的值等。為了避免各種不同的瀏覽器提供的DOM對(duì)象的不同所帶來的操作的不便，Netscape、IE以及其它的瀏覽器制造商與W3C一同推出了標(biāo)準(zhǔn)化的DOM，并于1998年10月完成了DOMLevel1。W3C對(duì)DOM的定義是：“一個(gè)與系統(tǒng)平臺(tái)和編程語(yǔ)言無關(guān)的接口，程序和腳本可以通過這個(gè)接口動(dòng)態(tài)地對(duì)文檔的內(nèi)容、結(jié)構(gòu)和樣式進(jìn)行訪問和修改”。標(biāo)準(zhǔn)化的DOM，在獨(dú)立性和適用范圍等各方面，都遠(yuǎn)遠(yuǎn)超過了各個(gè)瀏覽器專有的DOM。7.2JavaScript事件JavaScript采用了事件驅(qū)動(dòng)的響應(yīng)機(jī)制，用戶在網(wǎng)頁(yè)上的交互操作，會(huì)觸發(fā)相應(yīng)的事件。當(dāng)事件發(fā)生時(shí)，系統(tǒng)可以調(diào)用JavaScript中指定的事件處理函數(shù)進(jìn)行處理。事件可以被JavaScript偵測(cè)到。網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。例如，當(dāng)點(diǎn)擊網(wǎng)頁(yè)上的某個(gè)按鈕時(shí)，此按鈕的onClick事件發(fā)生，可以觸發(fā)某個(gè)函數(shù)。JavaScript中事件分為一般事件、頁(yè)面相關(guān)事件、表單相關(guān)事件、數(shù)據(jù)綁定事件等。Javascript中的一般事件事件說明onClick鼠標(biāo)單擊事件，多用在某個(gè)對(duì)象控制的范圍內(nèi)的鼠標(biāo)點(diǎn)擊onDblClick鼠標(biāo)雙擊事件onMouseDown鼠標(biāo)上的按鈕被按下onMouseUp鼠標(biāo)上的按鈕被按下，松開時(shí)激發(fā)的事件onMouseOver當(dāng)鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)觸發(fā)的事件onMouseOut當(dāng)鼠標(biāo)離開某對(duì)象范圍時(shí)觸發(fā)的事件onMouseMove當(dāng)鼠標(biāo)移動(dòng)時(shí)觸發(fā)的事件onKeyPress當(dāng)鍵盤上的某個(gè)鍵被按下并且釋放時(shí)觸發(fā)的事件onKeyDown當(dāng)鍵盤上的某個(gè)鍵被按下時(shí)觸發(fā)的事件onKeyUp當(dāng)鍵盤上的某個(gè)鍵被釋放時(shí)觸發(fā)的事件JavaScript中的頁(yè)面相關(guān)事件事件說明onAbort圖片在下載時(shí)被用戶中斷時(shí)觸發(fā)的事件onBefore當(dāng)前頁(yè)面的內(nèi)容將要改變時(shí)觸發(fā)的事件onError當(dāng)前頁(yè)面因?yàn)槟撤N原因而出現(xiàn)錯(cuò)誤時(shí)觸發(fā)的事件onLoad當(dāng)前頁(yè)面內(nèi)容加載到瀏覽器時(shí)觸發(fā)的事件onMove瀏覽器窗口移動(dòng)時(shí)觸發(fā)的事件onResize瀏覽器窗口的大小發(fā)生改變時(shí)觸發(fā)的事件onScroll瀏覽器窗口的滾動(dòng)條位置發(fā)生變化時(shí)觸發(fā)的事件onStop瀏覽器的停止按鈕被按下時(shí)或者正在下載的文件被中斷時(shí)觸發(fā)的事件onUnload當(dāng)前頁(yè)面刷新或者瀏覽器在本頁(yè)面打開其他資源時(shí)觸發(fā)的事件JavaScript中的表單相關(guān)事件onBlur當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)的事件onChange當(dāng)前元素失去焦點(diǎn)并且元素的內(nèi)容發(fā)生改變時(shí)觸發(fā)的事件onFocus當(dāng)前元素獲得焦點(diǎn)時(shí)觸發(fā)的事件onReset點(diǎn)擊表單中的重置按鈕時(shí)觸發(fā)的事件onSubmit提交表單時(shí)觸發(fā)的事件7.3window對(duì)象window對(duì)象是最主要的宿主對(duì)象，也是最頂層的宿主對(duì)象，是其它宿主對(duì)象的父對(duì)象。window對(duì)象對(duì)應(yīng)的瀏覽器窗口本身。如果網(wǎng)頁(yè)中包含框架集，則每個(gè)框架對(duì)應(yīng)一個(gè)Window對(duì)象，并且原網(wǎng)頁(yè)也對(duì)應(yīng)一個(gè)Window對(duì)象。只要打開了瀏覽器窗口，不管該窗口中是否有打開的網(wǎng)頁(yè)、當(dāng)遇到body、frameset或者frame時(shí)，都會(huì)自動(dòng)創(chuàng)建window對(duì)象的實(shí)例。7.3.1window對(duì)象的屬性window對(duì)象有很多屬性，其中常用的屬性如表所示。屬性說明name當(dāng)前窗口的名稱，可讀寫屬性parent如果當(dāng)前窗口有父窗口，表示其父窗口，只讀屬性opener產(chǎn)生當(dāng)前窗口的窗口對(duì)象，只讀屬性self當(dāng)前窗口對(duì)象，只讀屬性top當(dāng)前窗口的最頂層窗口對(duì)象，只讀屬性status瀏覽器狀態(tài)欄中顯示的內(nèi)容，可讀寫屬性defaultstatus瀏覽器狀態(tài)欄中顯示的缺省內(nèi)容，可讀寫屬性例如js1.html，當(dāng)鼠標(biāo)移動(dòng)到超級(jí)鏈接上方時(shí)，瀏覽器的狀態(tài)欄顯示歡迎信息。js1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>window對(duì)象的defaultStatus屬性和status屬性</title><script>

window.defaultStatus="這是狀態(tài)欄的默認(rèn)信息！";functionchange(){

window.status="當(dāng)把鼠標(biāo)移到圖像上方時(shí)，狀態(tài)欄顯示的信息！";}</script></head><body><ahref=""onMouseOver="change();returntrue"><img

src="image/flower1.jpg"width="200"border="0"/></a></body></html>當(dāng)把鼠標(biāo)移到圖像上方時(shí)，瀏覽器的地址欄里的信息會(huì)發(fā)生變化。7.3.2window對(duì)象的方法window對(duì)象的方法很多，可以分為窗體控制方法、對(duì)話框方法、時(shí)間等待與間隔方法。1．窗體控制方法方法說明moveBy(x,y)從當(dāng)前位置水平移動(dòng)窗體x個(gè)像素，垂直移動(dòng)窗體y個(gè)像素moveTo(x,y)移動(dòng)窗體左上角到相對(duì)于屏幕左上角的(x,y)點(diǎn)resizeBy(w,h)相對(duì)窗體當(dāng)前的大小，寬度調(diào)整w個(gè)像素，高度調(diào)整h個(gè)像素resizeTo(w,h)把窗體寬度調(diào)整為w個(gè)像素，高度調(diào)整為h個(gè)像素scrollTo(x,y)窗體中若有滾動(dòng)條，將橫向滾動(dòng)條移動(dòng)到相對(duì)于窗體寬度為x個(gè)像素的位置，將縱向滾動(dòng)條移動(dòng)到相對(duì)于窗體高度為y個(gè)像素的位置scrollBy(x,y)窗體中若有滾動(dòng)條，將橫向滾動(dòng)條移動(dòng)到相對(duì)于當(dāng)前滾動(dòng)條的x個(gè)像素的位置，將縱向滾動(dòng)條移動(dòng)到相對(duì)于當(dāng)前縱向滾動(dòng)條高度為y個(gè)像素的位置focus()使窗體或控件獲取焦點(diǎn)blur()使窗體或控件失去焦點(diǎn)open()打開（彈出）一個(gè)新的窗體close()關(guān)閉窗體（1）focus()和blur()focus()和blur()分別為窗體或控件獲取焦點(diǎn)和失去焦點(diǎn)，例如js2.html，使用焦點(diǎn)變化來驗(yàn)證表單數(shù)據(jù)的合法性。js2.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用window的focus方法和blur方法</title><script>functioncheckValue(txt){

if(txt.value==""){

alert(+"的內(nèi)容不能為空！"); }}</script><styletype="text/css">input{ background-color:#FFFFFF; width:90%; float:left; border:1pxridge#000000;}table{font-size:12px;bgcolor:#E5EEF5;}</style></head><body><form><tablewidth="200"><tr> <tdalign="right"width="40%">內(nèi)容：</td> <td><inputtype="text"onBlur="checkValue(this)"onMouseMove="this.focus();this.select()"value="這是內(nèi)容文本框"/></td> </tr> <tr> <tdalign="right"width="40%">用戶名：</td> <td><inputtype="text"name="name"onBlur="checkValue(this)"/></td> </tr> <tr> <tdalign="right">密碼：</td> <td><inputtype="password"name="password"onBlur="checkValue(this)"/></td> </tr> <tr> <tdalign="right">聯(lián)系方式：</td> <td><inputtype="text"name="mobile"onBlur="checkValue(this)"/></td> </tr></table></form></body></html>當(dāng)鼠標(biāo)移到內(nèi)容文本框時(shí)，文本框的內(nèi)容會(huì)自動(dòng)被選中，如圖所示。當(dāng)用戶名、密碼、聯(lián)系方式等文本框失去焦點(diǎn)時(shí)，會(huì)驗(yàn)證相應(yīng)的信息，如果信息為空，會(huì)給出相應(yīng)的提示。（2）open()open()方法用于打開一個(gè)新窗口，其語(yǔ)法格式如下：window.open(url,name,features,replace)其中，url：可選的字符串，聲明了要在新窗口顯示的文檔的URL。name：可選的字符串，該字符串是一個(gè)由逗號(hào)分隔的特征列表，該字符串聲明了新窗口的名稱。features：可選字符串，聲明了新窗口要顯示的標(biāo)準(zhǔn)瀏覽器的特征。new.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>一個(gè)新窗口</title></head><bodyonLoad="setTimeout('self.close()',5000)">這是一個(gè)新的窗口!<br/>5秒后窗口會(huì)自動(dòng)關(guān)閉！</body></html>js3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>window的open()方法和close()方法</title><script>functionopenNew(){

window.open("new.html","new","height=200,width=200,status=yes,toolbar=no,menuba=yes,location=yes,resizable=yes");}</script></head><body><inputtype="button"value="打開新窗口"onClick="openNew()"/></body></html>js3.html的顯示結(jié)果如圖所示。當(dāng)單擊“打開新窗口”按鈕時(shí)的顯示結(jié)果如圖所示，5秒之后，新窗口會(huì)自動(dòng)關(guān)閉。2．對(duì)話框方法對(duì)話框方法如表所示。方法說明alert(str)彈出一個(gè)對(duì)話框（包含一個(gè)OK按鈕）prompt(str1,str2)彈出消息對(duì)話框（包含一個(gè)OK按鈕、Cancel按鈕與一個(gè)文本輸入框）confirm(str)彈出消息對(duì)話框（包含一個(gè)OK按鈕與Cancel按鈕）3．時(shí)間等待與間隔方法時(shí)間等待與間隔方法如表所示。方法說明setTimeout(codes,millisec)指定的毫秒數(shù)后執(zhí)行指定的代碼clearTimeout(timeout)取消指定的setTimeout方法將要執(zhí)行的代碼setInterval(codes,millisec)間隔指定的毫秒數(shù)重復(fù)地執(zhí)行指定的代碼clearInterval(interval)取消指定的setInterval方法將要執(zhí)行的代碼（1）setTimeout()和clearTimeout()方法setTimeout()方法可以實(shí)現(xiàn)暫停指定的毫秒數(shù)后執(zhí)行指定的代碼，其語(yǔ)法格式如下：setTimeout(codes,millisec)其中：codes是必需的，可以是JavaScript代碼串，也可是JavaScript函數(shù)名；millisec也是必需的，指等待的毫秒數(shù)。注意：setTimeout()方法只能使codes執(zhí)行一次。如果要執(zhí)行多次，可以循環(huán)調(diào)用，也可以使用setInterval()方法。setTimeout()方法的使用示例可參照js4.html，實(shí)現(xiàn)一個(gè)計(jì)時(shí)器。js4.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用window的setTimeout()實(shí)現(xiàn)計(jì)時(shí)器</title><script>

varcount=0;functiontimeCount(){

document.getElementById("time").value=timeChange(count); count++; setTimeout("timeCount()",1000);}functiontimeChange(second){

varh=0,m=0,s=0; s=second;

if(second>3600){ h=parseInt(second/3600); second=second-h*3600;}

if(second>60){ m=parseInt(second/60); second=second-m*60; s=second;}returnfull(h)+":"+full(m)+":"+full(s);}

functionfull(t){

if(t<10){ t="0"+t; } returnt;}</script><styletype="text/css">input{ background-color:#FFFFFF; width:80px; border:1pxridge#000000;}</style></head><body><inputtype="button"value="開始計(jì)時(shí)"onClick="timeCount()"/>  <inputtype="text"id="time"/></body></html>

js4.html的顯示結(jié)果如圖所示，單擊“開始計(jì)時(shí)”，會(huì)顯示計(jì)時(shí)的時(shí)間。clearTimeout(timeout)方法用于取消用setTimeout()方法設(shè)定的計(jì)時(shí)對(duì)象，參數(shù)timeout為計(jì)時(shí)器的名稱。其使用示例可參照js5.html，在js4.html的基礎(chǔ)上添加停止計(jì)時(shí)的功能。js5.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用window的clearTimeout()停止計(jì)時(shí)器</title><script>

varcount=0;

vartimeout;functiontimeCount(){

document.getElementById("time").value=timeChange(count); count++; timeout=setTimeout("timeCount()",1000);}functiontimeChange(second){

varh=0,m=0,s=0; s=second;

if(second>3600){ h=parseInt(second/3600); second=second-h*3600;}

if(second>60){ m=parseInt(second/60); second=second-m*60; s=second;}returnfull(h)+":"+full(m)+":"+full(s);}

functionstopCount(){

clearTimeout(timeout);}functionfull(t){

if(t<10){ t="0"+t; } returnt;}</script><styletype="text/css">input{ background-color:#FFFFFF; width:80px; border:1pxridge#000000;}</style></head><body><inputtype="button"value="開始計(jì)時(shí)"onClick="timeCount()"/>  <inputtype="text"id="time"/>  <inputtype="button"value="停止計(jì)時(shí)"onClick="stopCount()"/></body></html>在瀏覽器中打開js5.html，單擊“開始計(jì)時(shí)”，會(huì)顯示計(jì)時(shí)的時(shí)間；單擊“停止計(jì)時(shí)”，計(jì)時(shí)會(huì)停止；再單擊“開始計(jì)時(shí)”，會(huì)繼續(xù)計(jì)時(shí)。其顯示效果如圖所示。（2）setInterval()方法和clearInterval()方法setInterval()方法可以根據(jù)指定的周期（以毫秒計(jì)）來調(diào)用JavaScript代碼或函數(shù)。其使用格式如下：setInterval(codes,millisec)其中：codes和millisec參數(shù)的含義與setTimeout()方法的參數(shù)相同。clearInterval()方法可以取消由setInterval()方法指定的計(jì)時(shí)對(duì)象。其語(yǔ)法格式如下：clearInterval(interval)interval為計(jì)時(shí)對(duì)象的名稱。js6.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用window的setInterval()方法和clearInterval()方法實(shí)現(xiàn)計(jì)時(shí)器</title><script>

varcount=0;

varinterval;functiontimeCount(){

document.getElementById("time").value=timeChange(count); count++;}functionbeginCount(){ interval=setInterval("timeCount()",1000);}functiontimeChange(second){

varh=0,m=0,s=0; s=second;

if(second>3600){ h=parseInt(second/3600); second=second-h*3600;}

if(second>60){ m=parseInt(second/60); second=second-m*60; s=second;}returnfull(h)+":"+full(m)+":"+full(s);}functionstopCount(){

clearInterval(interval);}functionfull(t){

if(t<10){ t="0"+t; } returnt;}</script><styletype="text/css">input{ background-color:#FFFFFF; width:80px; border:1pxridge#000000;}</style></head><body><inputtype="button"value="開始計(jì)時(shí)"onClick="beginCount()"/>  <inputtype="text"id="time"/>  <inputtype="button"value="停止計(jì)時(shí)"onClick="stopCount()"/></body></html>顯示效果同js5.html當(dāng)創(chuàng)建了一個(gè)網(wǎng)頁(yè)并把它加載到瀏覽器中時(shí)，網(wǎng)頁(yè)文檔就被轉(zhuǎn)換成一個(gè)文檔對(duì)象document。在DOM中，一個(gè)document對(duì)象被表示為一棵樹，也稱為節(jié)點(diǎn)樹。文檔是節(jié)點(diǎn)構(gòu)成的集合，節(jié)點(diǎn)主要包括：元素節(jié)點(diǎn)（elementnode）、文本節(jié)點(diǎn)（textnode）、屬性節(jié)點(diǎn)（attributenode）以及層疊樣式表（CSS）等。7.4document對(duì)象document對(duì)象的層次結(jié)構(gòu)如圖所示。1．document對(duì)象的屬性document對(duì)象提供了一系列的只讀或可讀寫的屬性，如表所示。屬性說明title設(shè)置或獲取文檔的標(biāo)題bgColor設(shè)置或獲取文檔的背景色fgColor設(shè)置或獲取文檔的前景色linkColor設(shè)置或獲取文檔的鏈接的顏色alinkColor設(shè)置或獲取文檔的活動(dòng)鏈接的顏色vlinkColor設(shè)置或獲取文檔的已訪問過的鏈接的顏色URL設(shè)置或獲取文檔的URLcharset設(shè)置或獲取文檔的字符集cookie設(shè)置或獲取與當(dāng)前文檔相關(guān)的cookiedomain獲取當(dāng)前文檔的域名，只讀屬性lastModified獲取當(dāng)前文檔的最后修改的日期時(shí)間，只讀屬性referrer獲取載入當(dāng)前文檔的URL，只讀屬性fileSize獲取當(dāng)前文檔的大小，只讀屬性body獲取當(dāng)前文檔的主體子對(duì)象，只讀屬性（1）bgColor屬性在JavaScript中，可以通過修改bgColor的屬性值來更改當(dāng)前文檔的背景顏色。js7.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>document對(duì)象的bgColor屬性</title></head><bodybgColor="orange"><inputtype="button"value="把背景色改為紅色"onClick="document.bgColor='red';"/><br/><inputtype="button"value="把背景色改為綠色"onClick="document.bgColor='green';"/><br/><inputtype="button"value="把背景色改為藍(lán)色"onClick="document.bgColor='blue';"/><br/></body></html>js7.html的顯示結(jié)果如圖所示，當(dāng)單擊按鈕時(shí)，文檔的背景色會(huì)發(fā)生相應(yīng)的改變。（2）linkColor、alinkColor與vlinkColor屬性linkColor、alinkColor與vlinkColor可以設(shè)置超級(jí)鏈接在不同的狀態(tài)下的顏色。js8.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>document的linkColor、alinkColor與vlinkColor屬性</title><script>

document.linkColor="red";

document.alinkColor="green";

document.vlinkColor="blue";</script></head><body><ahref="#">超級(jí)鏈接1</a><br/><ahref="#">超級(jí)鏈接2</a><br/><ahref="#">超級(jí)鏈接3</a><br/><ahref="#">超級(jí)鏈接4</a></body></html>在瀏覽器中打開js8.html，當(dāng)鏈接1與鏈接3被訪問過，鏈接2被激活時(shí)的顯示結(jié)果如圖所示。（3）cookie屬性Cookie是某些站點(diǎn)在客戶端的本地硬盤上存儲(chǔ)的一些很小的文本文件，JavaScript中提供了對(duì)Cookie比較全面的訪問。每個(gè)Cookie都是Cookie名=Cookie值的一個(gè)鍵值對(duì)，Cookie本身是一個(gè)字符串，多組名值對(duì)之間使用分號(hào)加空格分隔。2．document對(duì)象的方法document對(duì)象的方法很多，其說明如表所示。方法說明write()向文檔頁(yè)面輸出內(nèi)容writeln()分行向文檔頁(yè)面輸出內(nèi)容getElementById()根據(jù)id返回文檔的第一個(gè)對(duì)象的引用getElementsByName()根據(jù)name返回文檔的對(duì)象集合getElementsByTagName()根據(jù)標(biāo)簽名返回文檔的對(duì)象集合（1）getElementById()方法getElementById()方法用于通過元素的id訪問該元素，這是在DOM編程中經(jīng)常使用的方法。如果在頁(yè)面中存儲(chǔ)多個(gè)id值相同的元素，此方法會(huì)按照元素在頁(yè)面中出現(xiàn)的順序返回第一個(gè)符合條件的id。在操作頁(yè)面文檔時(shí)，最好給每個(gè)元素指定一個(gè)唯一的id值，可以根據(jù)id值操作此元素。js9.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>document對(duì)象的getElementById()方法</title></head><body><inputtype="text"id="myid"value="這是單行文本框"/><br/><divid="myid">這是第一個(gè)DIV</div><br/><divid="myid">這是第二個(gè)DIV</div><br/><script>

varelement=document.getElementById("myid");

document.write("nodeName="+element.nodeName+"<br/>");</script></body></html>js9.html的顯示結(jié)果如圖所示。（2）getElementsByName()方法getElementsByName()方法用于根據(jù)元素的name屬性值獲取符合條件的元素的對(duì)象集合。此方法一般用于單行文本框、單選框、復(fù)選框等具有name屬性的元素對(duì)象。由于DIV沒有name屬性，所以不可以使用此方法獲取DIV。js10.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>document對(duì)象的getElementsByName()方法</title></head><body><divname="div">這是第一個(gè)DIV</div><inputtype="text"name="text"value="這是第一個(gè)文本框"/><divname="div">這是第二個(gè)DIV</div><inputtype="text"name="text"value="這是第二個(gè)文本框"/><divname="div">這是第三個(gè)DIV</div><inputtype="text"name="text"value="這是第三個(gè)文本框"/><script>

var

divs=document.getElementsByName("div");

vartexts=document.getElementsByName("text");

document.write("<br/>div的個(gè)數(shù)為："+divs.length+"<br/>");

document.write("text的個(gè)數(shù)為："+text.length);</script></body></html>js10.html的顯示結(jié)果如圖所示。（3）getElementsByTagName()方法getElementsByTagName()方法用于根據(jù)元素的標(biāo)簽名稱來獲取對(duì)象的集合，當(dāng)參數(shù)為“*”時(shí)，會(huì)返回當(dāng)前頁(yè)面中所有的標(biāo)簽元素。此方法按照元素在文檔中出現(xiàn)的順序返回元素對(duì)象。作為元素標(biāo)簽名稱的字符串參數(shù)可以不區(qū)分大小寫。js11.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>document對(duì)象的getElementsByTagName()方法</title></head><body><inputtype="text"value="第一個(gè)文本框"/><br/><div>第一個(gè)DIV</div><inputtype="text"value="第一個(gè)文本框"/><br/><div>第二個(gè)DIV</div><inputtype="text"value="第一個(gè)文本框"/><br/><div>第三個(gè)DIV</div><inputtype="text"value="第一個(gè)文本框"/><br/><script>

varinput=document.getElementsByTagName("input");

vardiv=document.getElementsByTagName("div");

document.write("TagName為input的元素的個(gè)數(shù)為："+input.length+"<br/>");

document.write("TagName為div的元素的個(gè)數(shù)為："+div.length);</script></body></html>js11.html的顯示結(jié)果如圖所示。3．表單對(duì)象表單對(duì)象是document對(duì)象的子對(duì)象，表單是和JavaScript交互時(shí)最常用的對(duì)象之一。利用表單收集客戶端的信息，并且可以將信息提交給服務(wù)器處理。通常可以使用JavaScript來對(duì)表單進(jìn)行一些預(yù)處理，例如表單數(shù)據(jù)的合法性校驗(yàn)等。表單是頁(yè)面構(gòu)成的基本元素，一個(gè)頁(yè)面可以包含一個(gè)或多個(gè)表單。頁(yè)面中的表單可以通過表單名稱或者表單的索引來訪問，例如：document.表單名稱或者：document.forms[index]在JavaScript中引用表單時(shí)，必須先在頁(yè)面中用標(biāo)識(shí)創(chuàng)建表單，然后再進(jìn)行引用，即引用必須在表單創(chuàng)建之后。1．表單的屬性和方法表單對(duì)象的屬性說明如表所示。屬性說明acceptCharset服務(wù)器可以接受的字符集action設(shè)置或獲取表單的處理程序enctype設(shè)置或獲取表單用來編碼的MIME類型，此屬性的默認(rèn)值為“application/x-www-form-urlencoded”id設(shè)置或獲取表單的idname設(shè)置或獲取表單的namemethod設(shè)置或獲取表單的數(shù)據(jù)提交到服務(wù)器的方法，可取值為Get|Post，默認(rèn)值為Gettarget設(shè)置或獲取表單提交結(jié)果的目標(biāo)名稱length獲取表單中所包含的元素?cái)?shù)目，只讀屬性elements[index]根據(jù)索引獲取表單中的元素表單對(duì)象的方法說明如表所示。方法說明handleEvent()使事件處理程序生效reset()表單重置submit()表單提交2．表單的元素表單可以包含很多表單元素，一般為表單中的控件，例如文本框、密碼框、按鈕、單選框、復(fù)選框、多行文本框等?？梢允褂靡韵赂袷皆L問表單中的元素的屬性和方法：document.forms[索引].elements[索引].屬性document.forms[索引].elements[索引].方法(參數(shù))或者：document.表單名稱.元素名稱.屬性document.表單名稱.元素名稱.方法(參數(shù))js12.html:<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表單元素</title><script>functiongetFocus(obj){

obj.style.color="red";

obj.style.background="#FFE4C4";}functiongetBlur(obj){

obj.style.color="blue";

obj.style.background="#DCDCDC";}</script></head><body>用戶名：<inputtype="text"onFocus="getFocus(this)"onBlur="getBlur(this)"/><br/>密碼：<inputtype="password"onFocus="getFocus(this)"onBlur="getBlur(this)"/></body></html>在瀏覽器中打開js12.html，當(dāng)密碼框獲得焦點(diǎn)時(shí)的顯示效果如圖所示。js13.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表單對(duì)象元素的屬性和方法的使用</title><script>

vari=0; functionmovenext(obj,i){ if(obj.value.length==4){ document.forms[0].elements[i+1].focus(); } } functionshow(){ form=document.forms[0]; num=form.elements[0].value+form.elements[1].value +form.elements[2].value+form.elements[3].value; alert("你輸入的信用卡號(hào)碼是"+num); } functiontest(obj){ if(/\D/.test(obj.value)){ alert('只能輸入數(shù)字');

obj.value=''; } }</script></head><bodyonLoad="document.forms[0].elements[i].focus()">請(qǐng)輸入你的信用卡號(hào)碼：<form><inputtype="text"size="3"maxlength="4"onKeyup="test(this);movenext(this,0)"/>- <inputtype="text"size="3"maxlength="4"onKeyup="test(this);movenext(this,1)"/>- <inputtype="text"size="3"maxlength="4"onKeyup="test(this);movenext(this,2)"/>- <inputtype="text"size="3"maxlength="4"onKeyup="test(this);movenext(this,3)"/> <inputtype="button"value="顯示"onClick="show()"/></form></body></html>在瀏覽器中打開js13.html，文本框中只能輸入數(shù)字，其顯示如果如圖所示。當(dāng)單擊“顯示”按鈕時(shí)，其顯示如果如圖所示。7.5history對(duì)象history對(duì)象也稱為歷史對(duì)象，用來存儲(chǔ)客戶端瀏覽器窗口最近瀏覽過的網(wǎng)址。通過history對(duì)象，可以完成類似瀏覽器窗口前進(jìn)、后退等按鈕的功能。7.6location對(duì)象location對(duì)象提供了關(guān)于當(dāng)前打開窗口或者特定框架的url信息。一個(gè)多框架的窗口對(duì)象的location對(duì)象顯示的是父窗口的url，每個(gè)框架都有一個(gè)與之關(guān)聯(lián)的location對(duì)象。location對(duì)象是window對(duì)象和document對(duì)象的屬性，也可以看作是window對(duì)象和document對(duì)象的子對(duì)象。7.7動(dòng)態(tài)操作節(jié)點(diǎn)DOM是目前通用的操作HTML和XML的模型，使用JavaScript來操作DOM在網(wǎng)頁(yè)的設(shè)計(jì)和開發(fā)中使用非常廣泛。DOM操作節(jié)點(diǎn)主要分為獲取節(jié)點(diǎn)、增加節(jié)點(diǎn)、修改節(jié)點(diǎn)、刪除節(jié)點(diǎn)、獲取節(jié)點(diǎn)的屬性以及修改節(jié)點(diǎn)的屬性等。在JavaScript中獲取節(jié)點(diǎn)的方法如表所示。方法說明parentNode()獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)childNodes()獲取當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)集合firstChild()獲取當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)lastChild()獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)nextSibling()獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)同級(jí)節(jié)點(diǎn)previousSibling()獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)同級(jí)節(jié)點(diǎn)在JavaScript中增加、刪除、修改節(jié)點(diǎn)等動(dòng)態(tài)操作的方法如表所示。方法說明createElement()創(chuàng)建一個(gè)節(jié)點(diǎn)createT

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論