-->动态HTML教程-->3.5 访问对象的一个技巧

现在你已经可以在页面中移动对象了。 但是如果你需要将多个对象按照特定的顺序移动或者执行多个事件触发的行为时，不仅的代码体积会增加（每次访问一个对象时你都必须使用一次if/then 语句），而且每次都必须为某个行为键入document.truck.left 是一件很烦人的事。在Netscape模块中，当你嵌入DIV时，文件对象模块的层次结构就会增加，如下：

<div id="foo">


<div id="bar">


<div id="sna">


</div>


</div>


</div>

要访问foo，则必须执行document.foo, 而要访问bar，则必须执行document.foo.document.bar。而要访问sna，则必须执行document.foo.document.bar.document.sna。我快要受不了啦啦啦！！！

所以你必须解决引用对象时造成的代码体积膨胀的问题，还得避免每次移动一个对象时必须设定条件。但你可以用一个技巧解决这个问题。

任何用JavaScript编写过网页的人都知道任何打开一个小窗口：

windowID = window.open('name', 'http://blah.com/');

这项指令就可打开一个小窗口，但是你还可以通过使用windowID 作一个引用在继续控制追赶窗口。例如windowID.location = 'http://www.taylor.org/就可以改变窗口资源的定位。"windowID.close()"就可关闭该窗口。你所做的只是对一个Javascript对象设置一个引用。在动态HTML中也可以使用同样的技巧。

你可能会注意到在上一页的图表中，大多数定位属性的语法都很相似。只不过它们被用在了不同的对象上。我们可以用一个JavaScript例程解决上面的问题。

<script>


function setup(){


if(document.layers){


daTruck = document.truck;


} else if(document.all) {


daTruck = truck.style;


}


}


</script>

现在moveIt函数可以被改为

function moveIt() {


daTruck.left = parseInt(daTruck.left) - 5;


if(parseInt(daTruck.left) < 0){


daTruck.left = 480;


}


setTimeout('moveIt()', 100);


}

代码短了一些，对吧？下面我们将使页面这些图象都动起来。