思勤無邪

文檔對(duì)象

現(xiàn)在我們將開始討論更“實(shí)際”的話題——文檔對(duì)象(DOM)。文檔對(duì)象是指在網(wǎng)頁文檔里劃分出來的對(duì)象。在 JavaScript 能夠涉及的范圍內(nèi)有如下幾個(gè)“大”對(duì)象：window, document, location, navigator, screen, history 等。下面是一個(gè)文檔對(duì)象樹，你可以看到對(duì)象下包含對(duì)象的“壯觀”情景。要引用某個(gè)對(duì)象，就要把父級(jí)的對(duì)象都列出來。例如，要引用某表單“applicationForm”的某文字框“customerName”，就要用“document.applicationForm.customerName”。

下表中有些對(duì)象是全小寫的，有些是以大寫字母開頭的。以大寫字母開頭的對(duì)象表示，引用該對(duì)象不使用下表列出的名字，而直接用對(duì)象的“名字”（Id 或 Name，下面有講解），或用它所屬的對(duì)象數(shù)組指定。

這里我們不準(zhǔn)備講解對(duì)象的“事件”，雖然我們也會(huì)列出對(duì)象所能響應(yīng)的事件。

navigator 瀏覽器對(duì)象 反映了當(dāng)前使用的瀏覽器的資料。

屬性

appCodeName 返回瀏覽器的“碼名”(?)，流行的 IE 和 NN 都返回 'Mozilla'。
appName 返回瀏覽器名。IE 返回 'Microsoft Internet Explorer'，NN 返回 'Netscape'。
appVersion 返回瀏覽器版本，包括了大版本號(hào)、小版本號(hào)、語言、操作平臺(tái)等信息。
platform 返回瀏覽器的操作平臺(tái)，對(duì)于 Windows 9x 上的瀏覽器，返回 'Win32'（大小寫可能有差異）。
userAgent 返回以上全部信息。例如，IE5.01 返回 'Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)'。
javaEnabled() 返回一個(gè)布爾值，代表當(dāng)前瀏覽器允許不允許 Java。

screen 屏幕對(duì)象 反映了當(dāng)前用戶的屏幕設(shè)置。

屬性

width 返回屏幕的寬度（像素?cái)?shù)）。
height 返回屏幕的高度。
availWidth 返回屏幕的可用寬度（除去了一些不自動(dòng)隱藏的類似任務(wù)欄的東西所占用的寬度）。
availHeight 返回屏幕的可用高度。
colorDepth 返回當(dāng)前顏色設(shè)置所用的位數(shù) - 1：黑白；8：256色；16：增強(qiáng)色；24/32：真彩色

window 窗口對(duì)象 最大的對(duì)象，它描述的是一個(gè)瀏覽器窗口。一般要引用它的屬性和方法時(shí)，不需要用“window.xxx”這種形式，而直接使用“xxx”。一個(gè)框架頁面也是一個(gè)窗口。

屬性

name 窗口的名稱，由打開它的連接（<a target="...">）或框架頁（<frame name="...">）或某一個(gè)窗口調(diào)用的 open() 方法（見下）決定。一般我們不會(huì)用這個(gè)屬性。
status 指窗口下方的“狀態(tài)欄”所顯示的內(nèi)容。通過對(duì) status 賦值，可以改變狀態(tài)欄的顯示。
opener 用法：window.opener；返回打開本窗口的窗口對(duì)象。注意：返回的是一個(gè)窗口對(duì)象。如果窗口不是由其他窗口打開的，在 Netscape 中這個(gè)屬性返回 null；在 IE 中返回“未定義”（undefined）。undefined 在一定程度上等于 null。注意：undefined 不是 JavaScript 常數(shù)，如果你企圖使用“undefined”，那就真的返回“未定義”了。
self 指窗口本身，它返回的對(duì)象跟 window 對(duì)象是一模一樣的。最常用的是“self.close()”，放在<a>標(biāo)記中：“<a href="javascript:self.close()">關(guān)閉窗口</a>”。
parent 返回窗口所屬的框架頁對(duì)象。
top 返回占據(jù)整個(gè)瀏覽器窗口的最頂端的框架頁對(duì)象。
history 歷史對(duì)象，見下。
location 地址對(duì)象，見下。
document 文檔對(duì)象，見下。

方法

open() 打開一個(gè)窗口。用法：open(<URL字符串>, <窗口名稱字符串>, <參數(shù)字符串>);
　　<URL字符串>：描述所打開的窗口打開哪一個(gè)網(wǎng)頁。如果留空（''），則不打開任意網(wǎng)頁。
　　<窗口名稱字符串>：描述被打開的窗口的名稱（window.name），可以使用'_top'、'_blank'等內(nèi)建名稱。這里的名稱跟“<a href="..." target="...">”里的“target”屬性是一樣的。
　　<參數(shù)字符串>：描述被打開的窗口的樣貌。如果只需要打開一個(gè)普通窗口，該字符串留空（''），如果要指定樣貌，就在字符串里寫上一到多個(gè)參數(shù)，參數(shù)之間用逗號(hào)隔開。

例：打開一個(gè) 400 x 100 的干凈的窗口：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

open() 方法有返回值，返回的就是它打開的窗口對(duì)象。所以，

var newWindow = open('','_blank');

這樣把一個(gè)新窗口賦值到“newWindow”變量中，以后通過“newWindow”變量就可以控制窗口了。

close() 關(guān)閉一個(gè)已打開的窗口。
用法：window.close() 或 self.close()：關(guān)閉本窗口；
　　　<窗口對(duì)象>.close()：關(guān)閉指定的窗口。
　　如果該窗口有狀態(tài)欄，調(diào)用該方法后瀏覽器會(huì)警告：“網(wǎng)頁正在試圖關(guān)閉窗口，是否關(guān)閉？”然后等待用戶選擇是否；如果沒有狀態(tài)欄，調(diào)用該方法將直接關(guān)閉窗口。
blur() 使焦點(diǎn)從窗口移走，窗口變?yōu)?#8220;非活動(dòng)窗口”。
focus() 是窗口獲得焦點(diǎn)，變?yōu)?#8220;活動(dòng)窗口”。不過在 Windows 98，該方法只能使窗口的標(biāo)題欄和任務(wù)欄上的相應(yīng)按鈕閃爍，提示用戶該窗口正在試圖獲得焦點(diǎn)。
scrollTo() 用法：[<窗口對(duì)象>.]scrollTo(x, y)；使窗口滾動(dòng)，使文檔從左上角數(shù)起的(x, y)點(diǎn)滾動(dòng)到窗口的左上角。
scrollBy() 用法：[<窗口對(duì)象>.]scrollBy(deltaX, deltaY)；使窗口向右滾動(dòng) deltaX 像素，向下滾動(dòng) deltaY 像素。如果取負(fù)值，則向相反的方向滾動(dòng)。
resizeTo() 用法：[<窗口對(duì)象>.]resizeTo(width, height)；使窗口調(diào)整大小到寬 width 像素，高 height 像素。
resizeBy() 用法：[<窗口對(duì)象>.]resizeBy(deltaWidth, deltaHeight)；使窗口調(diào)整大小，寬增大 deltaWidth 像素，高增大 deltaHeight 像素。如果取負(fù)值，則減少。
alert() 用法：alert(<字符串>)；彈出一個(gè)只包含“確定”按鈕的對(duì)話框，顯示<字符串>的內(nèi)容，整個(gè)文檔的讀取、Script 的運(yùn)行都會(huì)暫停，直到用戶按下“確定”。
confirm() 用法：confirm(<字符串>)；彈出一個(gè)包含“確定”和“取消”按鈕的對(duì)話框，顯示<字符串>的內(nèi)容，要求用戶做出選擇，整個(gè)文檔的讀取、Script 的運(yùn)行都會(huì)暫停。如果用戶按下“確定”，則返回 true 值，如果按下“取消”，則返回 false 值。
prompt() 用法：prompt(<字符串>[, <初始值>])；彈出一個(gè)包含“確認(rèn)”“取消”和一個(gè)文本框的對(duì)話框，顯示<字符串>的內(nèi)容，要求用戶在文本框輸入一些數(shù)據(jù)，整個(gè)文檔的讀取、Script 的運(yùn)行都會(huì)暫停。如果用戶按下“確認(rèn)”，則返回文本框里已有的內(nèi)容，如果用戶按下“取消”，則返回 null 值。如果指定<初始值>，則文本框里會(huì)有默認(rèn)值。

事件

onload; onunload; onresize;onblur; onfocus; onerror

history 歷史對(duì)象 歷史對(duì)象指瀏覽器的瀏覽歷史。鑒于安全性的需要，該對(duì)象收到很多限制，現(xiàn)在只剩下下列屬性和方法。

屬性

length 歷史的項(xiàng)數(shù)。JavaScript 所能管到的歷史被限制在用瀏覽器的“前進(jìn)”“后退”鍵可以去到的范圍。本屬性返回的是“前進(jìn)”和“后退”兩個(gè)按鍵之下包含的地址數(shù)的和。

方法

back() 后退，跟按下“后退”鍵是等效的。
forward() 前進(jìn)，跟按下“前進(jìn)”鍵是等效的。
go() 用法：history.go(x)；在歷史的范圍內(nèi)去到指定的一個(gè)地址。如果 x < 0，則后退 x 個(gè)地址，如果 x > 0，則前進(jìn) x 個(gè)地址，如果 x == 0，則刷新現(xiàn)在打開的網(wǎng)頁。history.go(0) 跟 location.reload() 是等效的。

location 地址對(duì)象 它描述的是某一個(gè)窗口對(duì)象所打開的地址。要表示當(dāng)前窗口的地址，只需要使用“location”就行了；若要表示某一個(gè)窗口的地址，就使用“<窗口對(duì)象>.location”。

注意 屬于不同協(xié)議或不同主機(jī)的兩個(gè)地址之間不能互相引用對(duì)方的 location 對(duì)象，這是出于安全性的需要。例如，當(dāng)前窗口打開的是“www.a.com”下面的某一頁，另外一個(gè)窗口（對(duì)象名為：bWindow）打開的是“www.b.com”的網(wǎng)頁。如果在當(dāng)前窗口使用“bWindow.location”，就會(huì)出錯(cuò)：“沒有權(quán)限”。這個(gè)錯(cuò)誤是不能用錯(cuò)誤處理程序（Event Handler，參閱 onerror 事件)來接收處理的。

屬性

protocol 返回地址的協(xié)議，取值為 'http:','https:','file:' 等等。
hostname 返回地址的主機(jī)名，例如，一個(gè)“http://www.microsoft.com/china/”的地址，location.hostname == 'www.microsoft.com'。
port 返回地址的端口號(hào)，一般 http 的端口號(hào)是 '80'。
host 返回主機(jī)名和端口號(hào)，如：'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)容，也就是說，返回整個(gè)地址。在瀏覽器的地址欄上怎么顯示它就怎么返回。如果想一個(gè)窗口對(duì)象打開某地址，可以使用“location.href = '...'”，也可以直接用“location = '...'”來達(dá)到此目的。

方法

reload() 相當(dāng)于按瀏覽器上的“刷新”(IE)或“Reload”(Netscape)鍵。
replace() 打開一個(gè) URL，并取代歷史對(duì)象中當(dāng)前位置的地址。用這個(gè)方法打開一個(gè) URL 后，按下瀏覽器的“后退”鍵將不能返回到剛才的頁面。

frames[]; Frame 框架對(duì)象

document 文檔對(duì)象 描述當(dāng)前窗口或指定窗口對(duì)象的文檔。它包含了文檔從<head>到</body>的內(nèi)容。
　　用法：document （當(dāng)前窗口）
　　　或 <窗口對(duì)象>.document （指定窗口）

屬性

cookie
lastModified 當(dāng)前文檔的最后修改日期，是一個(gè) Date 對(duì)象。
referrer 如果當(dāng)前文檔是通過點(diǎn)擊連接打開的，則 referrer 返回原來的 URL。
title 指<head>標(biāo)記里用<title>...</title>定義的文字。在 Netscape 里本屬性不接受賦值。
fgColor 指<body>標(biāo)記的 text 屬性所表示的文本顏色。
bgColor 指<body>標(biāo)記的 bgcolor 屬性所表示的背景顏色。
linkColor 指<body>標(biāo)記的 link 屬性所表示的連接顏色。
alinkColor 指<body>標(biāo)記的 alink 屬性所表示的活動(dòng)連接顏色。
vlinkColor 指<body>標(biāo)記的 vlink 屬性所表示的已訪問連接顏色。

方法

open() 打開文檔以便 JavaScript 能向文檔的當(dāng)前位置（指插入 JavaScript 的位置）寫入數(shù)據(jù)。通常不需要用這個(gè)方法，在需要的時(shí)候 JavaScript 自動(dòng)調(diào)用。
write(); writeln() 向文檔寫入數(shù)據(jù)，所寫入的會(huì)當(dāng)成標(biāo)準(zhǔn)文檔 HTML 來處理。writeln() 與 write() 的不同點(diǎn)在于，writeln() 在寫入數(shù)據(jù)以后會(huì)加一個(gè)換行。這個(gè)換行只是在 HTML 中換行，具體情況能不能夠是顯示出來的文字換行，要看插入 JavaScript 的位置而定。如在<pre>標(biāo)記中插入，這個(gè)換行也會(huì)體現(xiàn)在文檔中。
clear() 清空當(dāng)前文檔。
close() 關(guān)閉文檔，停止寫入數(shù)據(jù)。如果用了 write[ln]() 或 clear() 方法，就一定要用 close() 方法來保證所做的更改能夠顯示出來。如果文檔還沒有完全讀取，也就是說，JavaScript 是插在文檔中的，那就不必使用該方法。

現(xiàn)在我們已經(jīng)擁有足夠的知識(shí)來做以下這個(gè)很多網(wǎng)站都有的彈出式更新通知了。

<script language="JavaScript">
<!--
var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' +
                'menubar=no,toolbar=no,directories=no,location=no,' +
                'status=no,resizable=no,scrollbars=yes');
whatsNew.document.write('<center><b>更新通知</b></center>');
whatsNew.document.write('<p>最后更新日期：00.08.01');
whatsNew.document.write('<p>00.08.01：增加了“我的最愛”欄目。');
whatsNew.document.write('<p align="right">' +
                '<a href="javascript:self.close()">關(guān)閉窗口</a>');
whatsNew.document.close();
-->
</script>

當(dāng)然也可以先寫好一個(gè) HTML 文件，在 open() 方法中直接 load 這個(gè)文件。

anchors[]; links[]; Link 連接對(duì)象

用法：document.anchors[[x]]; document.links[[x]]; <anchorId>; <linkId>
　　document.anchors 是一個(gè)數(shù)組，包含了文檔中所有錨標(biāo)記（包含 name 屬性的<a>標(biāo)記），按照在文檔中的次序，從 0 開始給每個(gè)錨標(biāo)記定義了一個(gè)下標(biāo)。
　　document.links 也是一個(gè)數(shù)組，包含了文檔中所有連接標(biāo)記（包含 href 屬性的<a>標(biāo)記和<map>標(biāo)記段里的<area>標(biāo)記），按照在文檔中的次序，從 0 開始給每個(gè)連接標(biāo)記定義了一個(gè)下標(biāo)。
　　如果一個(gè)<a>標(biāo)記既有 name 屬性，又有 href 屬性，則它既是一個(gè) Anchor 對(duì)象，又是一個(gè) Link 對(duì)象。
　　在 IE 中，如果在<a>標(biāo)記中添加“id="..."”屬性，則這個(gè)<a>對(duì)象被賦予一個(gè)標(biāo)識(shí)（ID），調(diào)用這個(gè)對(duì)象的時(shí)候只需要使用“<id>”就行了。很多文檔部件都可以用這個(gè)方法來賦予 ID，但要注意不能有兩個(gè) ID 相同。

anchors 和 links 作為數(shù)組，有數(shù)組的屬性和方法。單個(gè) Anchor 對(duì)象沒有屬性；單個(gè) Link 對(duì)象的屬性見下。

屬性

protocol; hostname; port; host; pathname; hash; search; href 與 location 對(duì)象相同。
target 返回/指定連接的目標(biāo)窗口（字符串），與<a>標(biāo)記里的 target 屬性是一樣的。

事件

onclick; onmouseover;onmouseout; onmousedown; onmouseup

embeds[] 插件對(duì)象 它是一個(gè)數(shù)組，包含了文檔中所有的插件（<embed>標(biāo)記）。因?yàn)槊總€(gè)插件的不同，每個(gè) Embed 對(duì)象也有不同的屬性和方法。

forms[]; Form 表單對(duì)象 document.forms[] 是一個(gè)數(shù)組，包含了文檔中所有的表單（<form>）。要引用單個(gè)表單，可以用 document.forms[x]，但是一般來說，人們都會(huì)這樣做：在<form>標(biāo)記中加上“name="..."”屬性，那么直接用“document.<表單名>”就可以引用了。

Form 對(duì)象的屬性

name 返回表單的名稱，也就是<form name="...">屬性。
action 返回/設(shè)定表單的提交地址，也就是<form action="...">屬性。
method 返回/設(shè)定表單的提交方法，也就是<form method="...">屬性。
target 返回/設(shè)定表單提交后返回的窗口，也就是<form target="...">屬性。
encoding 返回/設(shè)定表單提交內(nèi)容的編碼方式，也就是<form enctype="...">屬性。
length 返回該表單所含元素的數(shù)目。

方法

reset() 重置表單。這與按下“重置”按鈕是一樣的。
submit() 提交表單。這與按下“提交”按鈕是一樣的。

事件

onreset; onsubmit

以下從“Button”到“Textarea”都是表單的元素對(duì)象。

Button 按鈕對(duì)象 由“<input type="button">”指定。引用一個(gè) Button 對(duì)象，可以使用“<文檔對(duì)象>.<表單對(duì)象>.<按鈕名稱>”。<按鈕名稱>指在<input>標(biāo)記中的“name="..."”屬性的值。引用任意表單元素都可以用這種方法。

屬性

name 返回/設(shè)定用<input name="...">指定的元素名稱。
value 返回/設(shè)定用<input value="...">指定的元素的值。
form 返回包含本元素的表單對(duì)象。

方法

blur() 從對(duì)象中移走焦點(diǎn)。
focus() 讓對(duì)象獲得焦點(diǎn)。
click() 模擬鼠標(biāo)點(diǎn)擊該對(duì)象。

事件

onclick; onmousedown; onmouseup

屬性