Web編程基礎 第7章 DOM編程學習資料_第1頁
Web編程基礎 第7章 DOM編程學習資料_第2頁
Web編程基礎 第7章 DOM編程學習資料_第3頁
Web編程基礎 第7章 DOM編程學習資料_第4頁
Web編程基礎 第7章 DOM編程學習資料_第5頁
已閱讀5頁，還剩72頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第7章DOM編程

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

window.defaultStatus="這是狀態欄的默認信息！";functionchange(){

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

src="image/flower1.jpg"width="200"border="0"/></a></body></html>當把鼠標移到圖像上方時，瀏覽器的地址欄里的信息會發生變化。7.3.2window對象的方法window對象的方法很多，可以分為窗體控制方法、對話框方法、時間等待與間隔方法。1．窗體控制方法方法說明moveBy(x,y)從當前位置水平移動窗體x個像素，垂直移動窗體y個像素moveTo(x,y)移動窗體左上角到相對于屏幕左上角的(x,y)點resizeBy(w,h)相對窗體當前的大小，寬度調整w個像素，高度調整h個像素resizeTo(w,h)把窗體寬度調整為w個像素，高度調整為h個像素scrollTo(x,y)窗體中若有滾動條，將橫向滾動條移動到相對于窗體寬度為x個像素的位置，將縱向滾動條移動到相對于窗體高度為y個像素的位置scrollBy(x,y)窗體中若有滾動條，將橫向滾動條移動到相對于當前滾動條的x個像素的位置，將縱向滾動條移動到相對于當前縱向滾動條高度為y個像素的位置focus()使窗體或控件獲取焦點blur()使窗體或控件失去焦點open()打開（彈出）一個新的窗體close()關閉窗體（1）focus()和blur()focus()和blur()分別為窗體或控件獲取焦點和失去焦點，例如js2.html，使用焦點變化來驗證表單數據的合法性。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(+"的內容不能為空！"); }}</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%">內容：</td> <td><inputtype="text"onBlur="checkValue(this)"onMouseMove="this.focus();this.select()"value="這是內容文本框"/></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">聯系方式：</td> <td><inputtype="text"name="mobile"onBlur="checkValue(this)"/></td> </tr></table></form></body></html>當鼠標移到內容文本框時，文本框的內容會自動被選中，如圖所示。當用戶名、密碼、聯系方式等文本框失去焦點時，會驗證相應的信息，如果信息為空，會給出相應的提示。（2）open()open()方法用于打開一個新窗口，其語法格式如下：window.open(url,name,features,replace)其中，url：可選的字符串，聲明了要在新窗口顯示的文檔的URL。name：可選的字符串，該字符串是一個由逗號分隔的特征列表，該字符串聲明了新窗口的名稱。features：可選字符串，聲明了新窗口要顯示的標準瀏覽器的特征。new.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>一個新窗口</title></head><bodyonLoad="setTimeout('self.close()',5000)">這是一個新的窗口!<br/>5秒后窗口會自動關閉！</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的顯示結果如圖所示。當單擊“打開新窗口”按鈕時的顯示結果如圖所示，5秒之后，新窗口會自動關閉。2．對話框方法對話框方法如表所示。方法說明alert(str)彈出一個對話框（包含一個OK按鈕）prompt(str1,str2)彈出消息對話框（包含一個OK按鈕、Cancel按鈕與一個文本輸入框）confirm(str)彈出消息對話框（包含一個OK按鈕與Cancel按鈕）3．時間等待與間隔方法時間等待與間隔方法如表所示。方法說明setTimeout(codes,millisec)指定的毫秒數后執行指定的代碼clearTimeout(timeout)取消指定的setTimeout方法將要執行的代碼setInterval(codes,millisec)間隔指定的毫秒數重復地執行指定的代碼clearInterval(interval)取消指定的setInterval方法將要執行的代碼（1）setTimeout()和clearTimeout()方法setTimeout()方法可以實現暫停指定的毫秒數后執行指定的代碼，其語法格式如下：setTimeout(codes,millisec)其中：codes是必需的，可以是JavaScript代碼串，也可是JavaScript函數名；millisec也是必需的，指等待的毫秒數。注意：setTimeout()方法只能使codes執行一次。如果要執行多次，可以循環調用，也可以使用setInterval()方法。setTimeout()方法的使用示例可參照js4.html，實現一個計時器。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()實現計時器</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="開始計時"onClick="timeCount()"/>  <inputtype="text"id="time"/></body></html>

js4.html的顯示結果如圖所示，單擊“開始計時”，會顯示計時的時間。clearTimeout(timeout)方法用于取消用setTimeout()方法設定的計時對象，參數timeout為計時器的名稱。其使用示例可參照js5.html，在js4.html的基礎上添加停止計時的功能。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()停止計時器</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="開始計時"onClick="timeCount()"/>  <inputtype="text"id="time"/>  <inputtype="button"value="停止計時"onClick="stopCount()"/></body></html>在瀏覽器中打開js5.html，單擊“開始計時”，會顯示計時的時間；單擊“停止計時”，計時會停止；再單擊“開始計時”，會繼續計時。其顯示效果如圖所示。（2）setInterval()方法和clearInterval()方法setInterval()方法可以根據指定的周期（以毫秒計）來調用JavaScript代碼或函數。其使用格式如下：setInterval(codes,millisec)其中：codes和millisec參數的含義與setTimeout()方法的參數相同。clearInterval()方法可以取消由setInterval()方法指定的計時對象。其語法格式如下：clearInterval(interval)interval為計時對象的名稱。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()方法實現計時器</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="開始計時"onClick="beginCount()"/>  <inputtype="text"id="time"/>  <inputtype="button"value="停止計時"onClick="stopCount()"/></body></html>顯示效果同js5.html當創建了一個網頁并把它加載到瀏覽器中時，網頁文檔就被轉換成一個文檔對象document。在DOM中，一個document對象被表示為一棵樹，也稱為節點樹。文檔是節點構成的集合，節點主要包括：元素節點（elementnode）、文本節點（textnode）、屬性節點（attributenode）以及層疊樣式表（CSS）等。7.4document對象document對象的層次結構如圖所示。1．document對象的屬性document對象提供了一系列的只讀或可讀寫的屬性，如表所示。屬性說明title設置或獲取文檔的標題bgColor設置或獲取文檔的背景色fgColor設置或獲取文檔的前景色linkColor設置或獲取文檔的鏈接的顏色alinkColor設置或獲取文檔的活動鏈接的顏色vlinkColor設置或獲取文檔的已訪問過的鏈接的顏色URL設置或獲取文檔的URLcharset設置或獲取文檔的字符集cookie設置或獲取與當前文檔相關的cookiedomain獲取當前文檔的域名，只讀屬性lastModified獲取當前文檔的最后修改的日期時間，只讀屬性referrer獲取載入當前文檔的URL，只讀屬性fileSize獲取當前文檔的大小，只讀屬性body獲取當前文檔的主體子對象，只讀屬性（1）bgColor屬性在JavaScript中，可以通過修改bgColor的屬性值來更改當前文檔的背景顏色。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對象的bgColor屬性</title></head><bodybgColor="orange"><inputtype="button"value="把背景色改為紅色"onClick="document.bgColor='red';"/><br/><inputtype="button"value="把背景色改為綠色"onClick="document.bgColor='green';"/><br/><inputtype="button"value="把背景色改為藍色"onClick="document.bgColor='blue';"/><br/></body></html>js7.html的顯示結果如圖所示，當單擊按鈕時，文檔的背景色會發生相應的改變。（2）linkColor、alinkColor與vlinkColor屬性linkColor、alinkColor與vlinkColor可以設置超級鏈接在不同的狀態下的顏色。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="#">超級鏈接1</a><br/><ahref="#">超級鏈接2</a><br/><ahref="#">超級鏈接3</a><br/><ahref="#">超級鏈接4</a></body></html>在瀏覽器中打開js8.html，當鏈接1與鏈接3被訪問過，鏈接2被激活時的顯示結果如圖所示。（3）cookie屬性Cookie是某些站點在客戶端的本地硬盤上存儲的一些很小的文本文件，JavaScript中提供了對Cookie比較全面的訪問。每個Cookie都是Cookie名=Cookie值的一個鍵值對，Cookie本身是一個字符串，多組名值對之間使用分號加空格分隔。2．document對象的方法document對象的方法很多，其說明如表所示。方法說明write()向文檔頁面輸出內容writeln()分行向文檔頁面輸出內容getElementById()根據id返回文檔的第一個對象的引用getElementsByName()根據name返回文檔的對象集合getElementsByTagName()根據標簽名返回文檔的對象集合（1）getElementById()方法getElementById()方法用于通過元素的id訪問該元素，這是在DOM編程中經常使用的方法。如果在頁面中存儲多個id值相同的元素，此方法會按照元素在頁面中出現的順序返回第一個符合條件的id。在操作頁面文檔時，最好給每個元素指定一個唯一的id值，可以根據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對象的getElementById()方法</title></head><body><inputtype="text"id="myid"value="這是單行文本框"/><br/><divid="myid">這是第一個DIV</div><br/><divid="myid">這是第二個DIV</div><br/><script>

varelement=document.getElementById("myid");

document.write("nodeName="+element.nodeName+"<br/>");</script></body></html>js9.html的顯示結果如圖所示。（2）getElementsByName()方法getElementsByName()方法用于根據元素的name屬性值獲取符合條件的元素的對象集合。此方法一般用于單行文本框、單選框、復選框等具有name屬性的元素對象。由于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對象的getElementsByName()方法</title></head><body><divname="div">這是第一個DIV</div><inputtype="text"name="text"value="這是第一個文本框"/><divname="div">這是第二個DIV</div><inputtype="text"name="text"value="這是第二個文本框"/><divname="div">這是第三個DIV</div><inputtype="text"name="text"value="這是第三個文本框"/><script>

var

divs=document.getElementsByName("div");

vartexts=document.getElementsByName("text");

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

document.write("text的個數為："+text.length);</script></body></html>js10.html的顯示結果如圖所示。（3）getElementsByTagName()方法getElementsByTagName()方法用于根據元素的標簽名稱來獲取對象的集合，當參數為“*”時，會返回當前頁面中所有的標簽元素。此方法按照元素在文檔中出現的順序返回元素對象。作為元素標簽名稱的字符串參數可以不區分大小寫。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對象的getElementsByTagName()方法</title></head><body><inputtype="text"value="第一個文本框"/><br/><div>第一個DIV</div><inputtype="text"value="第一個文本框"/><br/><div>第二個DIV</div><inputtype="text"value="第一個文本框"/><br/><div>第三個DIV</div><inputtype="text"value="第一個文本框"/><br/><script>

varinput=document.getElementsByTagName("input");

vardiv=document.getElementsByTagName("div");

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

document.write("TagName為div的元素的個數為："+div.length);</script></body></html>js11.html的顯示結果如圖所示。3．表單對象表單對象是document對象的子對象，表單是和JavaScript交互時最常用的對象之一。利用表單收集客戶端的信息，并且可以將信息提交給服務器處理。通常可以使用JavaScript來對表單進行一些預處理，例如表單數據的合法性校驗等。表單是頁面構成的基本元素，一個頁面可以包含一個或多個表單。頁面中的表單可以通過表單名稱或者表單的索引來訪問，例如：document.表單名稱或者：document.forms[index]在JavaScript中引用表單時，必須先在頁面中用標識創建表單，然后再進行引用，即引用必須在表單創建之后。1．表單的屬性和方法表單對象的屬性說明如表所示。屬性說明acceptCharset服務器可以接受的字符集action設置或獲取表單的處理程序enctype設置或獲取表單用來編碼的MIME類型，此屬性的默認值為“application/x-www-form-urlencoded”id設置或獲取表單的idname設置或獲取表單的namemethod設置或獲取表單的數據提交到服務器的方法，可取值為Get|Post，默認值為Gettarget設置或獲取表單提交結果的目標名稱length獲取表單中所包含的元素數目，只讀屬性elements[index]根據索引獲取表單中的元素表單對象的方法說明如表所示。方法說明handleEvent()使事件處理程序生效reset()表單重置submit()表單提交2．表單的元素表單可以包含很多表單元素，一般為表單中的控件，例如文本框、密碼框、按鈕、單選框、復選框、多行文本框等。可以使用以下格式訪問表單中的元素的屬性和方法：document.forms[索引].elements[索引].屬性document.forms[索引].elements[索引].方法(參數)或者：document.表單名稱.元素名稱.屬性document.表單名稱.元素名稱.方法(參數)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，當密碼框獲得焦點時的顯示效果如圖所示。js13.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表單對象元素的屬性和方法的使用</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("你輸入的信用卡號碼是"+num); } functiontest(obj){ if(/\D/.test(obj.value)){ alert('只能輸入數字');

obj.value=''; } }</script></head><bodyonLoad="document.forms[0].elements[i].focus()">請輸入你的信用卡號碼：<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，文本框中只能輸入數字，其顯示如果如圖所示。當單擊“顯示”按鈕時，其顯示如果如圖所示。7.5history對象history對象也稱為歷史對象，用來存儲客戶端瀏覽器窗口最近瀏覽過的網址。通過history對象，可以完成類似瀏覽器窗口前進、后退等按鈕的功能。7.6location對象location對象提供了關于當前打開窗口或者特定框架的url信息。一個多框架的窗口對象的location對象顯示的是父窗口的url，每個框架都有一個與之關聯的location對象。location對象是window對象和document對象的屬性，也可以看作是window對象和document對象的子對象。7.7動態操作節點DOM是目前通用的操作HTML和XML的模型，使用JavaScript來操作DOM在網頁的設計和開發中使用非常廣泛。DOM操作節點主要分為獲取節點、增加節點、修改節點、刪除節點、獲取節點的屬性以及修改節點的屬性等。在JavaScript中獲取節點的方法如表所示。方法說明parentNode()獲取當前節點的父節點childNodes()獲取當前節點的子節點集合firstChild()獲取當前節點的第一個子節點lastChild()獲取當前節點的最后一個子節點nextSibling()獲取當前節點的下一個同級節點previousSibling()獲取當前節點的前一個同級節點在JavaScript中增加、刪除、修改節點等動態操作的方法如表所示。方法說明createElement()創建一個節點createT

溫馨提示

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

評論

0/150

提交評論