1、定义:
getElementById(id),以id标识符取得对象,是一个对象;
getElementsByName(name),以name取得节点清单,是一个数组集合;
getElementsByTagName(tagname),返回带有指定标签名的对象的集合.
2、一个文件中id是唯一的,但是name可以重名(比如radio), 所以,getElementById获得的是单个对象,用getElementById("id")直接访问, 而getElementsByName获得的结果以数组形式表示,访问getElementsByName获得的对象的方法是getElementsByName("name")[i]。访问哪个标签对象用getElementsByTagName("tagName")[i],注意getElementsByTagName的字符串可以不区分大小写。
3、比如有两个DIV:
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那么可以用getElementsByName("docname")获得这两个DIV,用getElementsByName("docname")[0]访问第一个DIV对象,用getElementsByName")[1]访问第二个DIV对象。具体访问哪个对象还有用getElementById("docid1");
4,例子
(1)
<html>
<head>
<script>
function idfun1(){
var v = document.getElementById("divOne");
v.innerText="linjianqinghao"; //写入信息
}
function idfun2(){
var v = document.getElementById("divOne");
v.innerText="you are very good"; //写入信息
}
</script>
</head>
<body>
</body>
<input type="button" value="显示信息1" οnclick="idfun1()"> <!--换成图片可以制作菜单-->
<input type="button" value="显示信息2" οnclick="idfun2()"><br><br>
<div id="divOne" style="width:100,height:100"></div>
</html>
(2)
<html>
<head>
<script>
function namefun() {
var s = document.getElementsByName("sex");
for(var i=0;i<s.length;i++) {
if(s[i].checked) { //选中发生的事件
alert(s[i].value);
}
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input type="radio" name="sex" value="0" id="s0" οnclick="namefun()">男</td>
<td><input type="radio" name="sex" value="1" id="s1" οnclick="namefun()">女</td>
</tr>
</table>
</form>
</body>
</html>
(3)
<html>
<head>
<script>
function tagNamefun(i) {
var s = document.getElementsByTagName("input");
s[i].value='请输入'+s[i].name;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:<input type="text" name="username" οnfοcus="tagNamefun(0)"></td>
</tr>
<tr>
<td>密码:<input type="text" name="password" οnfοcus="tagNamefun(1)"></td>
</tr>
</table>
</form>
</body>
</html>
(4)
<html>
<head>
<script>
function keyup(obj){
var vOne = obj.value.length;
//name也有时会被视作id(如在textarea中)
// 等价于document.getElementById("txaTwo").value = vOne;
//等价于document.getElementsByName("txaTwo")[0].value = vOne;
formOne.txaTwo.value = vOne;
}
</script>
</head>
<body >
<form name="formOne">
<table>
<tr>
<td><textarea name="txaOne" οnkeyup="keyup(this)"></textarea></td>
<td><textarea name="txaTwo"></textarea></td>
</tr>
</table>
</form>
</body>
</html>