本文将为大家详细讲解在js、PHP、xml中getElementById的用法，以及在ie下、FF（火狐Firefox）下、div中等其他出现问题的解答。
一、js中getElementById函数的用法及调用方法详解
js中getElementById函数的用法及调用方法getElementById 返回指定ID的控件(单个)
getElementById在javascript中是个很重要的句子
在表单中用getElementByid只能用id来标识，而不能用name
name一般是用在表单中来用.
getElementbyid可以用来取得表单中的值，比如getelementbyid(id可以来取得名字为id的表单取得的值
下面的是在网页中的常规用法:
实例1:
新窗口查看复制到剪贴板打印?
<input type=text id="abc" value="kk51.com"> 在js中可用a = document.getElementById("abc").value 这样就可以调用表单里的值赋给a
<input type=text id="abc" value="kk51.com"> 在js中可用a = document.getElementById("abc").value 这样就可以调用表单里的值赋给a<input type=text id="abc" value="kk51.com"><br/>在js中可用a = document.getElementById("abc").value 这样就可以调用表单里的值赋给a
实例2:
新窗口查看复制到剪贴板打印?
<div id="divblank"><img src="images/loading.gif" width="16" height="16" /></div> <script language="javascript"> document.getElementById("divblank").innerHTML="okokokok"; </script>
<div id="divblank"><img src="images/loading.gif" width="16" height="16" /></div> <script language="javascript"> document.getElementById("divblank").innerHTML="okokokok"; </script><div id="divblank"><img src="images/loading.gif" width="16" height="16" /></div><br/><script language="javascript"><br/>document.getElementById("divblank").innerHTML="okokokok";<br/></script>
实例3:
新窗口查看复制到剪贴板打印?
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()" /> <input name="TextBox2" type="text" id="TextBox2" /> </form>
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>Script language="Javascript"><br/>function CopyStr()<br/>{<br/> document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;<br/>}<br/></Script><br/><form name="form1" method="post" action="Default.aspx" id="form1"><br/><input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" /><br /><br/><input name="TextBox2" type="text" id="TextBox2" /><br/></form>
以上代码能够很好的工作。
但是，我觉得等号2边的 document.getElementById("...")的代码太长，想在使用前把它们先分别赋给2个变量，再使用它们。
这样还有一个好处，就是当 document.getElementById("...") 在多条语句中使用的时候，节约代码量是很可观的。
再者，如果document.getElementById("...")，要修改，只修改前边的一条语句就可以了。
于是改写为:
新窗口查看复制到剪贴板打印?
var oBox1 = document.getElementById("TextBox1"); var oBox2 = document.getElementById("TextBox2"); oBox2.value = oBox1.value;
var oBox1 = document.getElementById("TextBox1"); var oBox2 = document.getElementById("TextBox2"); oBox2.value = oBox1.value;var oBox1 = document.getElementById("TextBox1");<br/>var oBox2 = document.getElementById("TextBox2");<br/>oBox2.value = oBox1.value;
但是奇怪的是，程序执行后没有达到预期的结果。
原来,oBox2 本身是一个对象引用类型，要给它的属性赋值，必须先初始化它，然后才能使用。
改成以下代码就可以了：
新窗口查看复制到剪贴板打印?
var oBox1 = document.getElementById("TextBox1"); var oBox2 = new Object(); //声明对象变量 oBox2 = document.getElementById("TextBox2"); oBox2.value = oBox1.value;
var oBox1 = document.getElementById("TextBox1"); var oBox2 = new Object(); //声明对象变量oBox2 = document.getElementById("TextBox2"); oBox2.value = oBox1.value;var oBox1 = document.getElementById("TextBox1");<br/>var oBox2 = new Object(); //声明对象变量<br/>oBox2 = document.getElementById("TextBox2");<br/>oBox2.value = oBox1.value;
一切又恢复正常了 :)
