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