document.getElementById()和document.getElementsByName()的猫腻
顾名思义document.getElementById()是根据ID选择元素，document.getElementsByName()是根据NAME选择元素，其实不然，下面让我们来看几个有意思的例子。
测试代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>id,name test</title>
<script type="text/javascript">
//----------------td标签测试----------------//
function byidid() {
var selectbyidid = document.getElementById('selectedid');
alert(selectbyidid.length);
}
function bynamename() {
var selectbynamename = document.getElementsByName('selectedname');
alert(selectbynamename.length);
}
function bynameid() {
var selectbynameid = document.getElementsByName('selectedid');
alert(selectbynameid.length);
}
//----------------input标签测试----------------//
function byidbutid() {
var selectbyidbutid = document.getElementById('selectedbutid');
alert(selectbyidbutid.length);
}
function bynamebutname() {
var selectbynamebutname = document.getElementsByName('selectedbutname');
alert(selectbynamebutname.length);
}
function bynamebutid() {
var selectbynamebutid = document.getElementsByName('selectedbutid');
alert(selectbynamebutid.length);
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td id="selectedid" >id="selectedid"</td>
<td id="selectedid" >id="selectedid"</td>
<td id="selectedid" >id="selectedid"</td>
</tr>
<tr>
<td name="selectedname" >name="selectedname"</td>
<td name="selectedname" >name="selectedname"</td>
<td name="selectedname" >name="selectedname"</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tr>
<tr>
<td><a href="#" onclick="byidid()">byid-id</a></td>
<td><a href="#" onclick="bynamename()">byname-name</a></td>
<td><a href="#" onclick="bynameid()">byname-id</a></td>
</tr>
</table><br><br>
<form>
<table width="200" border="1">
<tr>
<td><input id="selectedbutid" type="button" value="selectedbutid"></td>
<td><input id="selectedbutid" type="button" value="selectedbutid"></td>
<td><input id="selectedbutid" type="button" value="selectedbutid"></td>
</tr>
<tr>
<td><input name="selectedbutname" type="button" value="selectedbutname"></td>
<td><input name="selectedbutname" type="button" value="selectedbutname"></td>
<td><input name="selectedbutname" type="button" value="selectedbutname"></td>
</tr>
<tr>
<td><a href="#" onclick="byidbutid()">byid-id</a></td>
<td><a href="#" onclick="bynamebutname()">byname-name</a></td>
<td><a href="#" onclick="bynamebutid()">byname-id</a></td>
</tr>
</table>
</form>
</body>
</html>以上分三种情况，相信大家都看的明白，byidid()、bynamename()、bynameid()三种不同的方法分别代表三种不同的元素选择方法，三组情况在<td>和<input>标签上都是一样的，所以我们只关注三种方法的不同结果。
三种方法分别在IE系列，Firefox(v10.0.2)和Chrome(17.963.83)下的测试结果如下：
| byidid() | bynamename() | bynameid() | |
| IE | undefined | 0 | 3 |
| Firefox | undefined | 3 | 0 |
| Chrome | undefined | 3 | 0 |
测试结果说明:
1、用document.getElementById()来选择多个有相同ID值的元素时三款浏览器都提示undefined
2、用document.getElementsByName()来选择多个有相同NAME值的元素时IE系列大部分返回0，说明IE系列不能用这样的方法选择元素，Firefox和Chrome都返回3，说明这两者都能用此方法来选择元素
3、用document.getElementsByName()来选择多个有相同ID值的元素时只有IE系列能返回3，说明这种情况只有IE系列可以选择元素，Firefox和Chrome都不能
总结：
综上所述，两个方法的字面意思来看的话IE系列还是有些变态，Firefox和Chrome均比较正常
