|
網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。
DHTML對象在腳本中的引用方法隨著DHTML（Dynamic HTML）的發展和應用，有許多網頁設計者為了使自己的網頁動起來，逐漸把JavaScript、VBScript等插入到自己的網頁中，而客戶端JavaScript、VBScript，主要引用和作用的是DHTML中的對象（確切的講是：元素），而DHTML中對象，據不完全統計也有150多種，每個對象中的方法和屬性加起來也有成千上萬。
這么多對象的方法和屬性，使許多設計者感到沒法下手，使許多初學者望而卻步。通過我在網頁設計上一些體會，我覺得我們只需要了解常用的一些對象的方法和屬性就夠了，沒有必要個個掌握，用到了學，用不到了就暫可不學。但有一點我們必須掌握：既然我們要操作和使用網頁中各對象，關于的網頁中各對象的引用就顯得尤為重要，下面我就我在網頁設計上對象引用上一些體會，給大家做一簡單的介紹。
DHTML對象在腳本的引用，分為絕對引用和相對引用，應用的場合不同，各有優劣，現舉例說明： <HTML>
<HEAD>
<TITLE>test</TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE="vbscript" for="window" event="onload">
tgname = ""
for i = 0 to document.all.length - 1
tgname = tgname & i & space(2) & document.all(i).tagName & vbLf
next
alert tgname
alert b1.children(2).tagName
</SCRIPT>
<style>
.body{font-size:12px}
</style>
</HEAD>
<BODY>
<span id="A1">
<a id="B1" href="a.htm">
<p id="C1">
<IMG id="D1" src="http://www.okasp.com/techinfo/b.gif">
</p>
<IMG id="E1" src="http://www.okasp.com/techinfo/c.gif">
<br>
</a>
</span>
<div>
<table id="F1" border="1" width="200" height="100">
<tbody id="G1">
<tr id="H1">
<td id="I1">
<input id="J1" type="checkbox">11
</td>
<td id="K1">
<input id="L1" type="checkbox">12
</td>
</tr>
<tr id="M1">
<td id="N1">
<input name="radio1" type="radio" value="1">21
</td>
<td id="O1">
<input name="radio1" type="radio" value="1">22
</td>
</tr>
</tbody>
</table>
</div>
<form id="P1">
<input id="Q1" type="text" size="10">
<select id="R1" size="1">
<option id="S1" value="1" selected>1</option>
<option id="T1" value="2">2<option>
</select>
<input id="U1" type="button" value="提交">
</form>
</BODY>
</HTML>
一、絕對引用：
1、用INDEX引用，以上代碼中可以看出，網頁各對象是有一定順序的，其INDEX（索引）值是從0開始，對應<HTML>標簽，到document.all.length結束，對應最后一個標簽<input...>。用document.all(index)或document.all[index]可以直接引用對象（VBScript不支持后一種）。
2、用id引用，如果給元素定義了id，可以直接引用對象，如：B1.href、C1.src、F1.width、H1.bgColor，J1.checked等等，但注意form里的元素不能直接引用，應這樣引用：P1.Q1.value、P1.R1.value等等，當然對象前加上document.all.也可以。
3、用id引用，還可以采用這種方式：document.all("id")或document.all["id"]（VBScripti不支持后一種），用這種方式有個優點，括號內可以為變量，當你訪問一組相似id對象時，這一點顯得尤為重要，如：document.all("A"+i)，i為變量，可以訪問：A1、A2...等對象。
缺點：對象的絕對引用，比較簡單直觀，引用準確，但缺點也很多，比如：用INDEX引用對象，網頁更新后，引用就會發生錯誤；用id引用，代碼的重復利用時，得頻繁定義id，稍有不慎將導致發生錯誤。因此我們有必要學習相對引用。
二、相對引用：
1、相對引用可有效的利用JavaScript中this對象，在this對象的父對象和子對象中引用對象。從以上的代碼，我們可以形象的看出對象的層次關系，對應于父對象和子對象關系。也可以只定義一個主要的id，其它對象通過父子關系推導出。
2、在DHTML中，window對象的級別最高，我們HTML頁屬于它的一個子對象document，而頁中的各元素又全在：document.all集合下...我們就可以通過這一層層的關系向上、向下找到我們需要的對象，父對象是：.parentElement；如：D1.parentElement指的是對象C1；子對象集合：.children，可以通過：.children(index)找到相應對象；.firstChild，第一個子對象，.lastChild最后一個子對象，如：B1.children(2)指的是對象E1；H1.firstChild.lastChild指的是對象L1，以上的對象都可以重復利用。
缺點：對象的相對引用，雖然可以簡化代碼，但設計者必須很清楚的知道各對象的層次關系，不然就會出錯，對象的層次因網頁更新發生變化時，引用會出錯。
三、引用技巧：
1、當你在引用少量對象時，用INDEX或ID絕對引用比較好；
2、當你的代碼重復利用率高，且變化不大時，用相對引用比較好，且盡量多用this對象；
3、VBScript中沒有this對象，使得引用當前對象不方便，可采用這種方式：eventName="javascript:subName(this)"，將當前對象傳遞給VBScript的subName(this)函數；
4、衍生窗口的父窗口是：window.opener，通過這種方式可以與父窗口交換信息和操作父窗口；非衍生窗口，IE6.0以上的版本也可以通過這種的方式訪問；
5、在腳本中應廣泛使用：document.frames、document.images、document.forms、document.links等集合，來達到快速引用和統一變換的作用；
6、在網頁中用腳本生成的靜態（初始化時生成的）和動態（響應用戶操作生成的）對象，也可以進行相對引用和絕對引用。
大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。
| 
