JS中 getElementById /Name /TagName 的应用

顾明思义,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" ο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 值的。

程序举例

</html>

                

  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>

    

</html>

改变 colspan 的值

<html>
<head>
<script type="text/javascript">
function setColSpan()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="2"
x[1].colSpan="6"
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td colspan="4">
单元格
1</td>
<td colspan="4">
单元格
2</td>
</tr>
<tr>
<td>
单元格
3</td>
<td>
单元格
4</td>
<td>
单元格
5</td>
<td>
单元格
6</td>
<td>
单元格
7</td>
<td>
单元格
8</td>
<td>
单元格
9</td>
<td>
单元格
10</td>
</tr>
</table>
<form>
<input type="button"
οnclick="setColSpan()" value=" 改变 colspan
">
</form>
</body>

支队一个单元隔进行对齐

<html>
<head>
<script type="text/javascript">
function alignCell()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].align="center"

}
</script>
</head>

<body>
<table id="myTable" border="1" width="100%">
<tr>
<td>
单元格
1</td>
<td>
单元格
2</td>
</tr>
<tr>
<td>
单元格
3</td>
<td>
单元格
4</td>
</tr>
</table>
<form>
<input type="button"
οnclick="alignCell()" value=" 居中对齐第一个单元格的内容
">
</form>
</body>   

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值