天空小小岛技术网站

标题: getElementById 方法及用法 [打印本页]
作者: 八号    时间: 2009-10-3 15:20
标题: getElementById 方法及用法
顾明思义，get-Element-By-Id，就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单就是给每个标签分配一个ID号：

document.getElementById("link").href;
document.getElementById("link").target;
document.getElementById("img").src;
document.getElementById("img").width;
document.getElementById("img").height;
document.getElementById("input").value;

那么如何取得<div></div>以及<a></a>之间的值呢？如<div id="div">aaa</div>中的aaa，<a href="#" id="link">bbb</a>中的bbb，也很简单，利用innerHTML就可以了：

document.getElementById("div").innerHTML;
document.getElementById("link").innerHTML;

getElementById 方法
返回具有指定 ID 属性值的第一个对象的一个引用。
语法
oElement = document.getElementById(sIDValue)

参数
sIDValue 必选项。指明 ID 属性值的字符串
返回值
返回 ID 属性值与指定值相同的第一个对象。
注释
如果 ID 属于一个集合，getElementById 方法返回集合中的第一个对象。
getElementById 方法与使用 all 集合上的 item 方法等同。例如，以下代码样本表示如何从 document 对象中取回 ID 为 oDiv 的第一个要素。
使用 DHTML 对象模型：
var oVDiv = document.body.all.item("oDiv");
使用文档对象模型(DOM)：
var oVDiv = document.getElementById("oDiv");

示例
以下例子表示如何使用 getElementById 方法返回 ID 属性值 oDiv 的第一次出现。
<script>
function fnGetId(){
//         Returns the first DIV element in the collection.
         var oVDiv=document.getElementById("oDiv1");
}
</script>
<DIV ID="oDiv1">Div #1</DIV>
<DIV ID="oDiv2">Div #2</DIV>
<DIV ID="oDiv3">Div #3</DIV>
<INPUT TYPE="button" VALUE="Get Names">


getElementById 方法
返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1
getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法
   
这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。


这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。


程序举例


  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function alignRow()
  6. {
  7. var x=document.getElementById('myTable').rows
  8. x[0].align="right"

  10. }
  11. </script>
  12. </head>

  14. <body>
  15. <table width="60%" id="myTable" border="1">
  16. <tr>
  17. <td>行1 单元格1</td>
  18. <td>行1 单元格2</td>
  19. </tr>
  20. <tr>
  21. <td>行2 单元格1</td>
  22. <td>行2 单元格2</td>
  23. </tr>
  24. <tr>
  25. <td>行3 单元格1</td>
  26. <td>行3 单元格2</td>
  27. </tr>
  28. </table>
  29. <form>
  30. <input type="button" onclick="alignRow()" value="右对齐第一行文字">
  31. </form>
  32. </body>

  34. </html>
复制代码




欢迎光临 天空小小岛技术网站 (http://tkxxd.net/) Powered by Discuz! X3.1