DHTML对象在脚本中的引用方法
时间：2007-02-17 来源：PHP爱好者
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、在网页中用脚本生成的静态（初始化时生成的）和动态（响应用户操作生成的）对象，也可以进行相对引用和绝对引用。
php爱好者站 http://www.phpfans.net 网页制作|网站建设|数据采集.
这么多对象的方法和属性，使许多设计者感到没法下手，使许多初学者望而却步。通过我在网页设计上一些体会，我觉得我们只需要了解常用的一些对象的方法和属性就够了，没有必要个个掌握，用到了学，用不到了就暂可不学。但有一点我们必须掌握：既然我们要操作和使用网页中各对象，关于的网页中各对象的引用就显得尤为重要，下面我就我在网页设计上对象引用上一些体会，给大家做一简单的介绍。
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、在网页中用脚本生成的静态（初始化时生成的）和动态（响应用户操作生成的）对象，也可以进行相对引用和绝对引用。
php爱好者站 http://www.phpfans.net 网页制作|网站建设|数据采集.
相关阅读 更多 +
