getElementById 用法的一个技巧

假设实现把 TextBox1 的字符实时的拷贝到 TextBox2 中，代码如下：

<Script language="Javascript">

        function CopyStr()

        {

          document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;

        }

     </Script>

     

    <form name="form1" method="post" action="Default.aspx" id="form1">

     <input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" /><br />

     <input name="TextBox2" type="text" id="TextBox2" />

    </form>

以上代码能够很好的工作。但是，我嫌等号2边的 document.getElementById("...")的代码太长，想在使用前把它们先分别赋给2个变量，再使用它们。这样还有一个好处，就是当 document.getElementById("...") 在多条语句中使用的时候，节约代码量是很可观的。再者，如果document.getElementById("...")，要修改，只修改前边的一条语句就可以了。于是改写为：

var oBox1 = document.getElementById("TextBox1");

            var oBox2 = document.getElementById("TextBox2");

            oBox2.value = oBox1.value;

但是奇怪的是，程序执行后没有达到预期的结果。

原来，oBox2 本身是一个对象引用类型，要给它的属性赋值，必须先初始化它，然后才能使用。改成以下代码就可以了：

var oBox1 = document.getElementById("TextBox1");

            var oBox2 = new Object();  //声明对象变量

            oBox2 = document.getElementById("TextBox2");

            oBox2.value = oBox1.value;