js中document.getElementById()用法
2014-03-03 21:19
447 查看
dom标准里面的
获取当前文档中指定id的元素
if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {
alert("提示：请输入有效的认证码");
document.getElementById("regjm1").focus();
return false;
}
例如:
<script>
function get()
{
if(document.getElementById("Addr").value=="")
{
alert("null");
}
else
{
alert(document.getElementById("Addr").value);
}
}
</script>
<head>
<input type="text" id="Addr" value="">
<input type="button" value="click" onclick="get();">
顾明思义，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值的。
这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。
程序举例
<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>
<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" onclick="alignCell()" value="居中对齐第一个单元格的内容">
</form>
</body>
</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" onclick="setColSpan()" value="改变colspan值">
</form>
</body>
</html>
获取当前文档中指定id的元素
if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {
alert("提示：请输入有效的认证码");
document.getElementById("regjm1").focus();
return false;
}
例如:
<script>
function get()
{
if(document.getElementById("Addr").value=="")
{
alert("null");
}
else
{
alert(document.getElementById("Addr").value);
}
}
</script>
<head>
<input type="text" id="Addr" value="">
<input type="button" value="click" onclick="get();">
顾明思义，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值的。
这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。
程序举例
<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>
<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" onclick="alignCell()" value="居中对齐第一个单元格的内容">
</form>
</body>
</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" onclick="setColSpan()" value="改变colspan值">
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jsDocument文档对象
- js中location地址对象
- js历史对象History
- javascript中的Dom对象
- 数据类型和Json格式
- jstl的fmt标签
- 使用<s:action>访问action无法显示结果jsp的问题
- Javascript之BOM对象
- JavaScript中的Window窗口对象
- jsp中使用c:if动态加载一些属性到标签 jsp中添加锚点，页面自动定位
- js之浏览器对象
- js对象以及对象方法
- js中的局部函数与局部变量
- js 禁止 ctrl 缩放
- JSTL自定义标签一简单的例子
- Makefile 编译jsoncpp源码 生成静态库和共享库的例子
- 动态加载原创js的代码
- JSP用户登录程序实现
- JS输入框校验
- JSTL核心标签库和EL表达式的联合使用