js中document通过ID获取的一些使用方法

js中document通过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" οnclick="fnGetId()"> 
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值的。 

例子:

 

 
  1. <html>

  2. <head>

  3. <script type="text/javascript">

  4. function alignRow()

  5. {

  6. var x=document.getElementById('myTable').rows

  7. x[0].align="right"

  8. }

  9. </script>

  10. </head>

  11. <body>

  12. <table width="60%" id="myTable" border="1">

  13. <tr>

  14. <td>行1 单元格1</td>

  15. <td>行1 单元格2</td>

  16. </tr>

  17. <tr>

  18. <td>行2 单元格1</td>

  19. <td>行2 单元格2</td>

  20. </tr>

  21. <tr>

  22. <td>行3 单元格1</td>

  23. <td>行3 单元格2</td>

  24. </tr>

  25. </table>

  26. <form>

  27. <input type="button" οnclick="alignRow()" value="右对齐第一行文字">

  28. </form>

  29. </body>

  30. </html>

改变clospan的值

 

 

 
  1. <html>

  2. <head>

  3. <script type="text/javascript">

  4. function setColSpan()

  5. {

  6.     var x=document.getElementById('myTable').rows[0].cells

  7. x[0].colSpan="2"

  8. x[1].colSpan="6"

  9. }

  10. </script>

  11. </head>

  12. <body>

  13. <table id="myTable" border="1">

  14. <tr>

  15. <td colspan="4">单元格1</td>

  16. <td colspan="4">单元格2</td>

  17. </tr>

  18. <tr>

  19. <td>单元格3</td>

  20. <td>单元格4</td>

  21. <td>单元格5</td>

  22. <td>单元格6</td>

  23. <td>单元格7</td>

  24. <td>单元格8</td>

  25. <td>单元格9</td>

  26. <td>单元格10</td>

  27. </tr>

  28. </table>

  29. <form>

  30. <input type="button" οnclick="setColSpan()" value="改变colspan值">

  31. </form>

  32. </body>

  33. </html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值