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均比较正常

 

posted @ 2012-04-01 20:37  DolphinBoy  阅读(1447)  评论(0)    收藏  举报