JavaScript 參考教程
文檔對象
現(xiàn)在我們將開始討論更“實際”的話題——文檔對象(DOM)。文檔對象是指在網(wǎng)頁文檔里劃分出來的對象。在 JavaScript 能夠涉及的范圍內(nèi)有如下幾個“大”對象:window, document, location, navigator, screen, history 等。下面是一個文檔對象樹,你可以看到對象下包含對象的“壯觀”情景。要引用某個對象,就要把父級的對象都列出來。例如,要引用某表單“applicationForm”的某文字框“customerName”,就要用“document.applicationForm.customerName”。
下表中有些對象是全小寫的,有些是以大寫字母開頭的。以大寫字母開頭的對象表示,引用該對象不使用下表列出的名字,而直接用對象的“名字”(Id 或 Name,下面有講解),或用它所屬的對象數(shù)組指定。
這里我們不準備講解對象的“事件”,雖然我們也會列出對象所能響應的事件。我們將會在下一章“事件處理”中講解事件。
瀏覽器對象
屏幕對象 窗口對象 歷史對象 地址對象 框架對象 文檔對象 連接對象 插件對象 表單對象 按鈕對象 表單元素對象 隱藏對象 密碼輸入?yún)^(qū)對象 重置按鈕對象 選擇區(qū)(下拉菜單、列表)對象 選擇項對象 提交按鈕對象 多行文本輸入?yún)^(qū)對象 圖片對象 |
navigator 瀏覽器對象 反映了當前使用的瀏覽器的資料。
屬性
appCodeName 返回瀏覽器的“碼名”(?),流行的 IE 和 NN 都返回 'Mozilla'。
appName 返回瀏覽器名。IE 返回 'Microsoft Internet Explorer',NN 返回 'Netscape'。
appVersion 返回瀏覽器版本,包括了大版本號、小版本號、語言、操作平臺等信息。
platform 返回瀏覽器的操作平臺,對于 Windows 9x 上的瀏覽器,返回 'Win32'(大小寫可能有差異)。
userAgent 返回以上全部信息。例如,IE5.01 返回 'Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)'。
javaEnabled() 返回一個布爾值,代表當前瀏覽器允許不允許 Java。
screen 屏幕對象 反映了當前用戶的屏幕設置。
屬性
width 返回屏幕的寬度(像素數(shù))。
height 返回屏幕的高度。
availWidth 返回屏幕的可用寬度(除去了一些不自動隱藏的類似任務欄的東西所占用的寬度)。
availHeight 返回屏幕的可用高度。
colorDepth 返回當前顏色設置所用的位數(shù) - 1:黑白;8:256色;16:增強色;24/32:真彩色
window 窗口對象 最大的對象,它描述的是一個瀏覽器窗口。一般要引用它的屬性和方法時,不需要用“window.xxx”這種形式,而直接使用“xxx”。一個框架頁面也是一個窗口。
屬性
name 窗口的名稱,由打開它的連接()或框架頁()或某一個窗口調(diào)用的 open() 方法(見下)決定。一般我們不會用這個屬性。
status 指窗口下方的“狀態(tài)欄”所顯示的內(nèi)容。通過對 status 賦值,可以改變狀態(tài)欄的顯示。
opener 用法:window.opener;返回打開本窗口的窗口對象。注意:返回的是一個窗口對象。如果窗口不是由其他窗口打開的,在 Netscape 中這個屬性返回 null;在 IE 中返回“未定義”(undefined)。undefined 在一定程度上等于 null。注意:undefined 不是 JavaScript 常數(shù),如果你企圖使用“undefined”,那就真的返回“未定義”了。
self 指窗口本身,它返回的對象跟 window 對象是一模一樣的。最常用的是“self.close()”,放在標記中:“關閉窗口”。
parent 返回窗口所屬的框架頁對象。
top 返回占據(jù)整個瀏覽器窗口的最頂端的框架頁對象。
history 歷史對象,見下。
location 地址對象,見下。
document 文檔對象,見下。方法
open() 打開一個窗口。用法:open(
, <窗口名稱字符串>, <參數(shù)字符串>);
:描述所打開的窗口打開哪一個網(wǎng)頁。如果留空(''),則不打開任意網(wǎng)頁。
<窗口名稱字符串>:描述被打開的窗口的名稱(window.name),可以使用'_top'、'_blank'等內(nèi)建名稱。這里的名稱跟“”里的“target”屬性是一樣的。
<參數(shù)字符串>:描述被打開的窗口的樣貌。如果只需要打開一個普通窗口,該字符串留空(''),如果要指定樣貌,就在字符串里寫上一到多個參數(shù),參數(shù)之間用逗號隔開。onload; onunload; onresize; onblur; onfocus; onerror例:打開一個 400 x 100 的干凈的窗口:
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
參數(shù)
top=# 窗口頂部離開屏幕頂部的像素數(shù) left=# 窗口左端離開屏幕左端的像素數(shù) width=# 窗口的寬度 height=# 窗口的高度 menubar=... 窗口有沒有菜單,取值yes或no toolbar=... 窗口有沒有工具條,取值yes或no location=... 窗口有沒有地址欄,取值yes或no directories=... 窗口有沒有連接區(qū),取值yes或no scrollbars=... 窗口有沒有滾動條,取值yes或no status=... 窗口有沒有狀態(tài)欄,取值yes或no resizable=... 窗口給不給調(diào)整大小,取值yes或no open() 方法有返回值,返回的就是它打開的窗口對象。所以,
var newWindow = open('','_blank');
這樣把一個新窗口賦值到“newWindow”變量中,以后通過“newWindow”變量就可以控制窗口了。
close() 關閉一個已打開的窗口。
用法:window.close() 或 self.close():關閉本窗口;
<窗口對象>.close():關閉指定的窗口。
如果該窗口有狀態(tài)欄,調(diào)用該方法后瀏覽器會警告:“網(wǎng)頁正在試圖關閉窗口,是否關閉?”然后等待用戶選擇是否;如果沒有狀態(tài)欄,調(diào)用該方法將直接關閉窗口。
blur() 使焦點從窗口移走,窗口變?yōu)椤胺腔顒哟翱凇薄?b>
focus() 是窗口獲得焦點,變?yōu)椤盎顒哟翱凇薄2贿^在 Windows 98,該方法只能使窗口的標題欄和任務欄上的相應按鈕閃爍,提示用戶該窗口正在試圖獲得焦點。
scrollTo() 用法:[<窗口對象>.]scrollTo(x, y);使窗口滾動,使文檔從左上角數(shù)起的(x, y)點滾動到窗口的左上角。
scrollBy() 用法:[<窗口對象>.]scrollBy(deltaX, deltaY);使窗口向右滾動 deltaX 像素,向下滾動 deltaY 像素。如果取負值,則向相反的方向滾動。
resizeTo() 用法:[<窗口對象>.]resizeTo(width, height);使窗口調(diào)整大小到寬 width 像素,高 height 像素。
resizeBy() 用法:[<窗口對象>.]resizeBy(deltaWidth, deltaHeight);使窗口調(diào)整大小,寬增大 deltaWidth 像素,高增大 deltaHeight 像素。如果取負值,則減少。
alert() 用法:alert(<字符串>);彈出一個只包含“確定”按鈕的對話框,顯示<字符串>的內(nèi)容,整個文檔的讀取、Script 的運行都會暫停,直到用戶按下“確定”。
confirm() 用法:confirm(<字符串>);彈出一個包含“確定”和“取消”按鈕的對話框,顯示<字符串>的內(nèi)容,要求用戶做出選擇,整個文檔的讀取、Script 的運行都會暫停。如果用戶按下“確定”,則返回 true 值,如果按下“取消”,則返回 false 值。
prompt() 用法:prompt(<字符串>[, <初始值>]);彈出一個包含“確認”“取消”和一個文本框的對話框,顯示<字符串>的內(nèi)容,要求用戶在文本框輸入一些數(shù)據(jù),整個文檔的讀取、Script 的運行都會暫停。如果用戶按下“確認”,則返回文本框里已有的內(nèi)容,如果用戶按下“取消”,則返回 null 值。如果指定<初始值>,則文本框里會有默認值。事件
history 歷史對象 歷史對象指瀏覽器的瀏覽歷史。鑒于安全性的需要,該對象收到很多限制,現(xiàn)在只剩下下列屬性和方法。
屬性
length 歷史的項數(shù)。JavaScript 所能管到的歷史被限制在用瀏覽器的“前進”“后退”鍵可以去到的范圍。本屬性返回的是“前進”和“后退”兩個按鍵之下包含的地址數(shù)的和。
方法
back() 后退,跟按下“后退”鍵是等效的。
forward() 前進,跟按下“前進”鍵是等效的。
go() 用法:history.go(x);在歷史的范圍內(nèi)去到指定的一個地址。如果 x < 0,則后退 x 個地址,如果 x > 0,則前進 x 個地址,如果 x == 0,則刷新現(xiàn)在打開的網(wǎng)頁。history.go(0) 跟 location.reload() 是等效的。
location 地址對象 它描述的是某一個窗口對象所打開的地址。要表示當前窗口的地址,只需要使用“l(fā)ocation”就行了;若要表示某一個窗口的地址,就使用“<窗口對象>.location”。
注意 屬于不同協(xié)議或不同主機的兩個地址之間不能互相引用對方的 location 對象,這是出于安全性的需要。例如,當前窗口打開的是“www.a.com”下面的某一頁,另外一個窗口(對象名為:bWindow)打開的是“www.b.com”的網(wǎng)頁。如果在當前窗口使用“bWindow.location”,就會出錯:“沒有權(quán)限”。這個錯誤是不能用錯誤處理程序(Event Handler,參閱 onerror 事件)來接收處理的。
屬性
protocol 返回地址的協(xié)議,取值為 'http:','https:','file:' 等等。
hostname 返回地址的主機名,例如,一個“http://www.microsoft.com/china/”的地址,location.hostname == 'www.microsoft.com'。
port 返回地址的端口號,一般 http 的端口號是 '80'。
host 返回主機名和端口號,如:'www.a.com:8080'。
pathname 返回路徑名,如“http://www.a.com/b/c.html”,location.pathname == 'b/c.html'。
hash 返回“#”以及以后的內(nèi)容,如“http://www.a.com/b/c.html#chapter4”,location.hash == '#chapter4';如果地址里沒有“#”,則返回空字符串。
search 返回“?”以及以后的內(nèi)容,如“http://www.a.com/b/c.asp?selection=3&jumpto=4”,location.search == '?selection=3&jumpto=4';如果地址里沒有“?”,則返回空字符串。
href 返回以上全部內(nèi)容,也就是說,返回整個地址。在瀏覽器的地址欄上怎么顯示它就怎么返回。如果想一個窗口對象打開某地址,可以使用“l(fā)ocation.href = '...'”,也可以直接用“l(fā)ocation = '...'”來達到此目的。方法
reload() 相當于按瀏覽器上的“刷新”(IE)或“Reload”(Netscape)鍵。
replace() 打開一個 URL,并取代歷史對象中當前位置的地址。用這個方法打開一個 URL 后,按下瀏覽器的“后退”鍵將不能返回到剛才的頁面。
frames[]; Frame 框架對象 請參閱“使用框架和 Cookies”一章。
document 文檔對象
描述當前窗口或指定窗口對象的文檔。它包含了文檔從到的內(nèi)容。
用法:document (當前窗口)
或 <窗口對象>.document (指定窗口)
屬性
cookie 關于 cookie 請參看“使用框架和 Cookies”一章。
lastModified 當前文檔的最后修改日期,是一個 Date 對象。
referrer 如果當前文檔是通過點擊連接打開的,則 referrer 返回原來的 URL。
title 指標記里用定義的文字。在 Netscape 里本屬性不接受賦值。
fgColor 指標記的 text 屬性所表示的文本顏色。
bgColor 指標記的 bgcolor 屬性所表示的背景顏色。
linkColor 指標記的 link 屬性所表示的連接顏色。
alinkColor 指標記的 alink 屬性所表示的活動連接顏色。
vlinkColor 指標記的 vlink 屬性所表示的已訪問連接顏色。方法
open() 打開文檔以便 JavaScript 能向文檔的當前位置(指插入 JavaScript 的位置)寫入數(shù)據(jù)。通常不需要用這個方法,在需要的時候 JavaScript 自動調(diào)用。
write(); writeln() 向文檔寫入數(shù)據(jù),所寫入的會當成標準文檔 HTML 來處理。writeln() 與 write() 的不同點在于,writeln() 在寫入數(shù)據(jù)以后會加一個換行。這個換行只是在 HTML 中換行,具體情況能不能夠是顯示出來的文字換行,要看插入 JavaScript 的位置而定。如在標記中插入,這個換行也會體現(xiàn)在文檔中。
clear() 清空當前文檔。
close() 關閉文檔,停止寫入數(shù)據(jù)。如果用了 write[ln]() 或 clear() 方法,就一定要用 close() 方法來保證所做的更改能夠顯示出來。如果文檔還沒有完全讀取,也就是說,JavaScript 是插在文檔中的,那就不必使用該方法。現(xiàn)在我們已經(jīng)擁有足夠的知識來做以下這個很多網(wǎng)站都有的彈出式更新通知了。
當然也可以先寫好一個 HTML 文件,在 open() 方法中直接 load 這個文件。
用法:document.anchors[[x]]; document.links[[x]];
document.anchors 是一個數(shù)組,包含了文檔中所有錨標記(包含 name 屬性的標記),按照在文檔中的次序,從 0 開始給每個錨標記定義了一個下標。
document.links 也是一個數(shù)組,包含了文檔中所有連接標記(包含 href 屬性的標記和標記既有 name 屬性,又有 href 屬性,則它既是一個 Anchor 對象,又是一個 Link 對象。
在 IE 中,如果在標記中添加“id="..."”屬性,則這個對象被賦予一個標識(ID),調(diào)用這個對象的時候只需要使用“
anchors 和 links 作為數(shù)組,有數(shù)組的屬性和方法。單個 Anchor 對象沒有屬性;單個 Link 對象的屬性見下。
屬性
protocol; hostname; port; host; pathname; hash; search; href 與 location 對象相同。
target 返回/指定連接的目標窗口(字符串),與事件
embeds[] 插件對象 它是一個數(shù)組,包含了文檔中所有的插件(
forms[]; Form 表單對象 document.forms[] 是一個數(shù)組,包含了文檔中所有的表單(
Form 對象的屬性
name 返回表單的名稱,也就是
屬性。
action 返回/設定表單的提交地址,也就是屬性。
method 返回/設定表單的提交方法,也就是屬性。
target 返回/設定表單提交后返回的窗口,也就是屬性。
encoding 返回/設定表單提交內(nèi)容的編碼方式,也就是屬性。
length 返回該表單所含元素的數(shù)目。方法
reset() 重置表單。這與按下“重置”按鈕是一樣的。
submit() 提交表單。這與按下“提交”按鈕是一樣的。事件
以下從“Button”到“Textarea”都是表單的元素對象。
Button 按鈕對象 由“”指定。引用一個 Button 對象,可以使用“<文檔對象>.<表單對象>.<按鈕名稱>”。<按鈕名稱>指在標記中的“name="..."”屬性的值。引用任意表單元素都可以用這種方法。
屬性
name 返回/設定用指定的元素名稱。
value 返回/設定用指定的元素的值。
form 返回包含本元素的表單對象。方法
blur() 從對象中移走焦點。
focus() 讓對象獲得焦點。
click() 模擬鼠標點擊該對象。事件
屬性
name 返回/設定用指定的元素名稱。
value 返回/設定用指定的元素的值。
form 返回包含本元素的表單對象。
checked 返回/設定該復選框?qū)ο笫欠癖贿x中。這是一個布爾值。
defaultChecked 返回/設定該復選框?qū)ο竽J是否被選中。這是一個布爾值。方法
blur() 從對象中移走焦點。
focus() 讓對象獲得焦點。
click() 模擬鼠標點擊該對象。事件
elements[]; Element 表單元素對象 <表單對象>.elements 是一個數(shù)組,包含了該表單所有的對象。一般我們不用該數(shù)組,而直接引用各個具體的對象。
Hidden 隱藏對象 由“”指定。
屬性
name 返回/設定用指定的元素名稱。
value 返回/設定用指定的元素的值。
form 返回包含本元素的表單對象。
Password 密碼輸入?yún)^(qū)對象 由“”指定。
屬性
name 返回/設定用指定的元素名稱。
value 返回/設定密碼輸入?yún)^(qū)當前的值。
defaultValue 返回用指定的默認值。
form 返回包含本元素的表單對象。方法
blur() 從對象中移走焦點。
focus() 讓對象獲得焦點。
select() 選中密碼輸入?yún)^(qū)里全部文本。事件
”指定。一組 Radio 對象有共同的名稱(name 屬性),這樣的話,document.formName.radioName 就成了一個數(shù)組。要訪問單個 Radio 對象就要用:document.formName.radioName[x]。
單個 Radio 對象的屬性
name 返回/設定用指定的元素名稱。
value 返回/設定用指定的元素的值。
form 返回包含本元素的表單對象。
checked 返回/設定該單選域?qū)ο笫欠癖贿x中。這是一個布爾值。
defaultChecked 返回/設定該對象默認是否被選中。這是一個布爾值。方法
blur() 從對象中移走焦點。
focus() 讓對象獲得焦點。
click() 模擬鼠標點擊該對象。事件
Reset 重置按鈕對象 由“”指定。因為 Reset 也是按鈕,所以也有 Button 對象的屬性和方法。至于“onclick”事件,一般用 Form 對象的 onreset 代替。
Select 選擇區(qū)(下拉菜單、列表)對象
由“指定的元素名稱。
length 返回 Select 對象下選項的數(shù)目。
selectedIndex 返回被選中的選項的下標。這個下標就是在 options[] 數(shù)組中該選項的位置。如果 Select 對象允許多項選擇,則返回第一個被選中的選項的下標。
form 返回包含本元素的表單對象。
方法
blur() 從對象中移走焦點。
focus() 讓對象獲得焦點。
事件
options[]; Option 選擇項對象 options[] 是一個數(shù)組,包含了在同一個 Select 對象下的 Option 對象。Option 對象由“指定。因為 Submit 也是按鈕,所以也有 Button 對象的屬性和方法。至于“onclick”事件,一般用 Form 對象的 onsubmit 代替。
Password 對象所有的屬性、方法和事件,Text 對象都有。
Textarea 多行文本輸入?yún)^(qū)對象 由“