1. document的成員物件陣列：使用document.成員物件陣列名稱來存取。成員物件陣列名稱如下：
(1) anchors：即是錨點。在<a>標籤中若有設定name屬性，即為錨點。如：
<a name="tt1">tt1</a>
<a name="tt2">tt2</a>
<a>tt3</a>
<script type="text/javascript">
document.write(document.anchors.length); //顯示2
</script>
註一：anchors.length表示錨點的數目。
註二：javascript程式碼是根據「程式碼執行的當前狀況」來執行，若上述程式碼寫成如：
<script type="text/javascript">
document.write(document.anchors.length);
</script>
<a name="tt1">tt1</a>
<a name="tt2">tt2</a>
<a>tt3</a>
則document.anchors.length的顯示結果會是0。因為在document.anchors.length這一行執行時，還沒有執行<a>標籤的宣告！
(2) embeds：即網頁中的<embed>標籤，主要用來處理遷入的多媒體物件。因近年來實用性越低，且幾乎已被<object>標籤所取代，故不詳述。
(3) forms：即是表單物件，實用性很高。大部分的表單物件在html教學中已有講解，在此僅做補充。常用的物件成員及物件成員函式有：
(3-1) this：這是javascript的關鍵字，代表當前物件本身。表單中的物件可用this.form來呼叫物件本身所在的表單，例如：
<form name="f1" >
<input type="text" name="tt1" />
<input type="button" name="tt2" value="顯示時間" onclick="
var now =new Date();
this.form.tt1.value=now.toLocaleString();"
/></form>
//執行後顯示：
//按下按鈕後顯示： 
(3-2) action：表單呈送之後，所要跳轉的網頁之URL網址。
(3-3) elements：表單中的控制項，依照宣告順序來決定序數。可用elements[N]來呼叫表單中序數為N的控制項。如：
<form>
<input type="text" size="10"/>
<input type="text" size="10"/>
<input type="button" value="確定" onclick="
var f1=this.form;
f1.elements[0].value='0';
f1.elements[1].value='1'; "/>
</form>
//執行後顯示：
//按下按鈕後顯示： 
(3-4) name：表單的名稱。
(3-5) method：表單傳送時使用的方式。常見值有：get、post…等。
(3-6) encoding：表單資料在呈送時，所採取的編碼種類。即是表單屬性enctype。預設值為：application/x-www-form-urlencoded。
(3-7) target：表單呈送之後，開啟跳轉網頁的視窗名稱。若表單在內嵌式框架中，則此項需特別注意。其值為（以下，關於視窗、父視窗與視窗架構，請參閱javascript教學à window物件及其子物件à一. 2）：
※ _blank：表示開啟新的視窗作為跳轉網頁視窗。這是預設值。
※ _parent：表示以當前視窗的父視窗作為跳轉網頁視窗。
※ _slef：表示以當前視窗作為跳轉網頁視窗。
※ _top：表示以當前視窗架構的始祖視窗作為跳轉網頁視窗。
※ 視窗名稱：若某視窗有使用window.name此成員來設定視窗名稱，則可使用該視窗的視窗名稱來呼叫該視窗。
(3-8) reset()：此函式的效用為使整個表單回到預設值，相當於按下reset控制項。
(3-9) submit()：此函式的效用為呈送表單，相當於按下submit控制項。與action搭配，可使同一份表單有多個跳轉網頁的選擇。
2. document成員物件，有幾個常用也實用的成員函式與成員屬性，如：
(1) innerHTML：若document成員物件在html中是成對標籤而非獨立標籤，則innerHTML成員屬性代表的，就是該成對標籤之內所包含的程式碼。如：
<table border="1">
<tr><td id="tt">測試</td></tr>
</table>
<script type="text/javascript">
document.write(document.getElementById('tt').innerHTML); //顯示：測試
</script>
又如：
<table border="1">
<tr><td id="tt">測試</td></tr>
</table>
<input type="button" value="按我" onclick="
document.getElementById('tt').innerHTML='測試完畢';"/>
//執行後顯示：
//按下按鈕後，顯示：
註一：若標籤內部的程式碼包含別的html標籤，則此函式仍會回傳完整的程式碼。這是很實用的功能，可以用來即時修改程式碼。
(2) style：可更改document物件的style屬性。程式碼形式為：
document物件.style.子屬性=值;
如：
<table border="1" id="tt" style="position:absolute; top:100px; left:100px;">
<tr height="30">
<td width="100">A</td><td width="100">B</td><td width="100">C</td>
</tr>
</table>
<input type="button" value="按我" onclick="
document.getElementById('tt').style.top='200px'; //設定document物件的style
"/>
//執行後按下按鈕，可改變表格的位置。
(3) className：document物件所使用的CSS類別名稱。即是該物件標籤之class屬性的值。
(4) offsetTop、offsetLeft：這兩個屬性代表document物件在瀏覽器視窗中的座標值。offsetTop為document物件最頂部的Y座標值，offsetLeft為document物件最左部的X座標值。
留言列表
javascript 教學 (1)
