首頁 > 開發者 > JavaScript
使用瀏覽器的內部對象系統, 可實現與HTML文檔進行互動。它的作用是將相關元素組織封裝起來，提供給程式設計人員使用，從而減輕編程人的勞動，提高設計Web頁面的能力。
一、瀏覽器對象層次及其主要作用
除了前面提到過的文檔document對象外，Navigator瀏覽器中還提供了視窗（Window）對象以及曆史（History）和位置（Location）對象。
瀏覽器對象(Navigator)
提供有關瀏覽器的資訊
視窗對象(Windows)
Window對象處於對象層次的最頂端，它提供了處理Navigator視窗的方法和屬性。
位置對象(Location)
Location對象提供了與當前開啟的URL一起工作的方法和屬性，它是一個靜態對象。
曆史對象(History)
History對象提供了與曆史清單有關的資訊。
文檔對象(Document)
document對象包含了與文件項目(elements)一起工作的對象，它將這些元素封裝起來供編程人員使用。
編程人員利用這些對象，可以對WWW瀏覽器環境中的事件進行控制並作出處理。在JavaScript中提供了非常豐富的內部方法和屬性,從而減輕了編程人員的工作,提高編程效率。這正是基於對象與物件導向的根本區別所在。在這些對象系統中,文檔對象屬於非常重要的,它位於最低層,但對於我們實現Web頁面資訊互動起作關鍵作用。因而它是對象系統的核心部分。
| Links | Anchor | Form | Method | Prop |
| 連結化物件 | 錨對象 | 表單對象 | 方法 | 對象 |
表6－1 document對象
從表6-1中可以看出，document對象的主要作用就是把這些基本的元素（如links,anchor等）封裝起來，提供給編程人員使用。從另一個角度看，document對象中又是由屬性和方法組成。
１、document中三個主要的對象
在document中主要有：links,anchor,form等三個最重要的對象：
（１）anchor錨對象：
anchor對象指的是<A Name=...> </A>標識在HTML源碼中存在時產生的對象。它包含著文檔中所有的anchors資訊。
（２）連結links對象
link對象指的是用<A Href=...> </A>標記的串連一個超文本或超媒體的元素作為一個特定的URL。
（３）表單（Form）對象
表單對象是文檔對象的一個元素，它含有多種格式的對象儲存資訊，使用它可以在JavaScript指令碼中編寫程式進行文字輸入，並可以用來動態改變文檔的行為。通過document. Forms[]數組來使得在同一個頁面上可以有多個相同的表單,使用forms[]數組要比使用表單名字要方便得多。
例:下面就是一個使用表單數組和表單名字的例子。該程式使得兩個表單中的欄位內容保持一致。
Test6_1.htm
<Html>
<head>
</head>
<body>
<form >
<input type=text >
</form>
<form NAME="my">
<input type=text >
</form>
</body>
</html>
其中用了OnChnge事件(當表單內容改變時激發)。第一個使用表單名字標識my,第二個使用表單數組Forms[]。其效果是一致。
２、文檔對象中的attribute屬性
document對象中的attribute屬性，主要用於在引用Href標識時，控制著有關顏色的格式和有關文檔標題、文檔原檔案的URL以及文檔最後更新的日期。這部分元素的主要含義如下：
（１）連結顏色：alinkcolor
這個元素主要用於，當選取一個連結時，連結化物件本身的顏色就按alinkcolo r指定改變。
（２）連結顏色：linkcolor
當使用者使用<A Href=...> Text string </A>連結後，Textstring的顏色就會按Linkcolor所指定的顏色更新。
（３）瀏覽過後的顏色：VlinkColor
該屬性工作表示的是已被瀏覽儲存為已瀏覽過的連結顏色。
（４）背景顏色：bgcolor
該元素包含文檔背景的顏色。
（５）前景顏色：Fgcolor
該元素包含HTML文檔中文本的前景顏色。
３、文檔對象的基本元素
（１）表單內容：
表單內容是與HTML文檔中<Form>...</Form>相對應的一組對象在HTML文檔所建立的表單數，由length指定。通過document.forms.length反映該文檔中所建立的表單數目。
（２）錨屬性：anchors
該屬性中，包含了HTML文檔的所有<A> </A>標記為Name=...的語句標識。所有“錨”的數目儲存在document.anchors.length中。
（３）連結屬性：links
連結屬性是指在文檔中<A>...</A>的由Href=...指定的數目，其連結數目儲存在document.links.length中。
三、範例
例1:下面我們通過一個例子來說明文檔對象的綜合應用。輸出結果見圖6-2所示。
Test6_2.htm
<html>
<head>
</HEAD>
<BOdy>
<Form Name="mytable">
請輸入資料：
<Input Type="text" Name="text1" Value="">
</Form>
<A name="Link1" href="test31.htm">連結到第一個文本</a><br>
<A name="Link2" href="test32.htm">連結到第二個文本</a><br>
<A name="Link2" href="test33.htm">連結到第三個文本</a><br>
<A href="#Link1">第一錨點</a>
<A href="#Link2">第二錨點</a>
<A Href="#Link3">第三錨點</a>
<BR>
<Script Language="JavaScript">
document.write("文檔有"+document.links.length+"個連結"+"<br>");
document.write("文檔有"+document.anchors.length+"個錨點"+"<br>");
document.write("文檔有"+document.forms.length+"個表單");
</script>
</body>
</HTML>
圖6-2
例子2：下列程式隨機產生每日一語。
test6_3.html
<HTML>
<HEAD>
<script Language="JavaScript">
<!--
tips = new Array(6);
tips[0]="每日一語（1）";
tips[1]="每日一語（2）";
tips[2]="每日一語（3）";
tips[3]="每日一語（4）";
tips[4]="每日一語（5）";
tips[5]="每日一語（6）";
index = Math.floor(Math.random() * tips.length);
document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");
</Script>
</HEAD>
</BODY>
</HTML>
輸出結果見圖6-3所示。
圖6-3
本講主要介紹了JavaScript對象系統的使用方法，其中重點介紹了文檔對象及使用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
