六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 93|回复: 0

JS中 getElementById /Name /TagName 的应用

[复制链接]

升级  56%

6

主题

6

主题

6

主题

童生

Rank: 1

积分
28
 楼主| 发表于 2013-2-7 19:13:00 | 显示全部楼层 |阅读模式
顾明思义,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>之间的值呢?如<divid="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" >



<span style="font-size: 9pt; color: #8d8d8d;">getElementById 方法
返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的idtext1
getElementById(text1)
就能得到这个text1框的对象,并使用text框的所有属性和方法

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

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

程序举例

</html>

                
<div class="highlighter">

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

  • }
  • </script>
  • </head>

  • <body>
  • <table width="60%" id="myTable" border="1">
  • <tr>
  • <td>行1 单元格1</td>
  • <td>行1 单元格2</td>
  • </tr>
  • <tr>
  • <td>行2 单元格1</td>
  • <td>行2 单元格2</td>
  • </tr>
  • <tr>
  • <td>行3 单元格1</td>
  • <td>行3 单元格2</td>
  • </tr>
  • </table>
  • <form>
  • <input type="button" onclick="alignRow()" value="右对齐第一行文字">
  • </form>
  • </body>

  • </html>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表