JS中 getElementById /Name /TagName 的应用

jslyghj

浏览: 17418 次
性别:
来自: 连云港

最近访客更多访客>>

29228863

java小蜗牛

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

JavaScript HTML

顾明思义，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" onclick="fnGetId()">

getElementById 方法
返回具有指定 ID 属性值的第一个比如说有个网页中有个 text 框的 id 叫 text1
getElementById(text1) 就能得到这个 text1 框的对象 , 并使用 text 框的所有属性和方法

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

程序举例

</html>

<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>

</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>

支队一个单元隔进行对齐

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

}
</script>
</head>

分享到：

通过js 向table添加或修改row及cell | ResultSet转换成XML

2009-09-15 10:12
浏览 1769
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论