本文深入解析JavaScript中通过document.forms[0]访问表单元素与使用getElementsByName获取元素集合的区别。重点说明当同名元素仅有一个时，forms[0]返回单个对象而非数组，导致length属性为undefined；而getElementsByName始终返回HTMLCollection。文章提供了处理全选逻辑的代码示例，帮助开发者避免常见的类型判断错误。
document.forms[0]与getElementsByName的行为差异
首先通过一个具体示例来展示相关用法。
参考以下代码片段：
<form name="buyerForm" method="post" action="/mysport/control/user/list.do">
<input type="checkbox" id="usernames" value="testtest" >testtest<br>
<input type="checkbox" name="usernames" value="testtest" >testtest<br>
<input type="text" id="usernames" value="testtest" >testtest<br>
</form>在HTML页面包含一个或多个form表单时，document.forms[0]会返回一个NodeList类型的form数组。对于document.forms[0].usernames，这里的usernames既可以是id属性的值，也可以是name属性的值，两者在此处等价。该方法不会区分具体组件类型（如文本框、单选框或复选框）。
这里需要区分两种不同的情况。
当存在一个input元素，其id或name为'usernames'时，document.forms[0].usernames返回的是具体的input组件对象。此时若需操作该元素，必须按照具体组件类型的操作方法进行。
在这种情况下，执行alert(document.forms[0].usernames.length)将返回undefined，因为单个input组件对象没有length属性。反之，当存在两个或两个以上input元素的id或name均为'usernames'时，document.forms[0].usernames返回的是一个NodeList数组。此时，alert(document.forms[0].usernames.length)会返回数组长度，上述示例中返回值为3。因此，在使用JavaScript进行全选操作时，必须考虑同名复选框仅有一个或多个的不同情况。
参考以下实现代码：
function allSelect(){
var form = document.forms[0];
var state = form.allselectbox.checked;
var length = form.usernames.length;//当有两个或者两个以上的复选框name为usernames的时候，返回的是数组的长度
//当有一个复选框name为usernames的时候，form.usernames返回的是复选框对象，而不是数组,所以其length属性是undefined
if(length){ //在javascript中，只要被判断的条件是0，null，或者undefined，均被认为是false，其他情况均认为是true
for(var i=0;i<length;i++){
form.usernames[i].checked=state;
}
}
else{
form.usernames.checked=state;
}
}若有一个组件id为'usernames'或多个组件id为'usernames'，document.getElementById('usernames')返回的值始终是一个表单组件。当存在多个组件id为'usernames'时，该方法仅返回第一个匹配的组件。另一方面，无论有一个或多个组件name为'usernames'，document.getElementsByName()均返回HTMLCollection数组。需注意与document.getElementsByTagName()的区别，后者依据标签类别获取数组。例如var names = document.getElementsByTagName("usernames")，alert(names[0])返回undefined，因为不存在以'usernames'为标签名的元素（<usernames value=''></usernames>这种标签不存在）。但getElementsByTagName仍返回数组集合，其内容为空，names[0]不存在，因此返回undefined。当访问超出数组范围的索引时（如var test = {'0','1','2',};alert(test[3])），同样返回undefined。