JavaScript中document.forms[0]与getElementByName区别
投稿：hebedich
字体：[ ] 类型：转载 时间：
在很多情况下JavaScript中document.forms[0]与getElementByName这两种用法没有区别，这片文章详细的解释了两者的区别和用法，有兴趣的朋友可以参考一下。
首先我们来看个示例：
&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&
document.forms[0]在HTML页面中有一个form表单或者多个form表单的时候，都是返回一个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
所以，当使用js进行全选的时候，要考虑同名复选框有一个和多个的情况
function allSelect(){
var form = document.forms[0];
var state = form.allselectbox.
var length = form.usernames.//当有两个或者两个以上的复选框name为usernames的时候，返回的是数组的长度
//当有一个复选框name为usernames的时候，form.usernames返回的是复选框对象，而不是数组,所以其length属性是undefined
if(length){ //在javascript中，只要被判断的条件是0，null，或者undefined，均被认为是false，其他情况均认为是true
for(var i=0;i&i++){
form.usernames[i].checked=
form.usernames.checked=
有一个组件id为'usernames'或者多个组件id为'usernames',document.getElementById('usernames')返回的值都是一个表单组件，当有多个组件id为'usernames',返回的是第一个id为'usernames'组件。
有一个组件name为'usernames'或者多个组件name为'usernames',document.getElementsByName()返回的都是HTMLCollection数组。注意与document.getElementsByTagName()的区别，后者是根据标签类别获取数组。
var names = document.getElementsByTagName("usernames"),alert(names[0])这里返回的结果是undefined,我原来把byName与byTagName弄混了，而没有标签是以usernames开始的，&usernames value=''&&/usernames&这是不存在的。
但是getElementsByTagName返回的依然是数组集合，其不含任何内容，names[0]不存在，所以返回的是undefined，因为超出数组范围的时候，弹出的都是undefined值。
var test = {'0','1','2',};alert(test[3]);返回的是undefined.
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具getElementByName()方法和getter属性，及与getElementById()的区别 - CSDN博客
getElementByName()方法和getter属性，及与getElementById()的区别
可以使用document.getElementByName()方法根据元素的name属性来获得元素。定义name属性的元素包括button、fieldset、input、keygen、output.select、textarea、form、iframe、object、map、meta、param。
getElementByName()获取的是具有相同name属性及值的集合，返回值类型是NodeList。由于ID通常具有唯一性，所以getElementById()通常获得的是对元素对象的引用，而且一般为特定的元素节点。而getter属性的返回值则可以是特定元素或者元素集合。
使用HTMLDocument接口的getter属性也可以达到跟getElementByName()相同的目的，对比如下：
var logoNodeList=document.getElementByName(&logo&);
var logoNodeList=document[&logo&] 和var logoNodeList=document.logo 跟上面的方法具有相同的效果。
getter属性与getElementByName()方法有很多不同之处，getter属性的返回值是根据一个计算过程获得的，其类型会有变化。计算步骤如下：
首先获得所有具有特定name属性值的元素，组成元素集合检查。如果集合中仅有一个元素，并且该元素是iframe，那么就返回该元素所表示的WindowProxy对象，后续步骤就不再进行；如果该元素不是iframe，那么就返回该元素，后续步骤就不再进行； 如果检查结果中包含多个元素，那么就返回所有具有特定name属性值的元素集合。
能够作为getter属性参数的name 也与getElementByName()方法不同，仅定义name属性的元素可以使用getter属性，包括applet、embed、form、iframe、img、object元素，并且applet、object元素的id属性值也可以作为name属性使用，img元素的id属性值也可以作为name属性使用，即使同时定义了name属性
但是getter属性不能获取定义了name属性的input元素。
并不是所有元素都能定义name户型，所有，不推荐使用getter属性与getElementByName()方法，除非特殊需要
本文已收录于以下专栏：
相关文章推荐
document对象：该对象将标记型文档进行封装。
该对象的作用：是对可以标记型文档进行操作
最常见的操作是：想要实现动态效果，需要对节点操作，那么要先获取到这个节点操作，那么要先获取到这个节点。...
一般JavaBean属性以小写字母开头，驼峰命名格式，相应的 getter/setter 方法是 get/set 接上首字母大写的属性名。
例如：属性名为userName，其对应的getter/se...
JavaBean规范文档：/otndocs/jcp/7224-javabeans-1.01-fr-spec-oth-JSpec/
关于属性名的...
实例方法与类方法
@interface Monster :
实例方法与类方法
Kiwir-OC02
Created by ibokan on 15/12/8.
javaBean中，要设置或获取某个property的值，就需要相应的get和set方法，对于primitive和自定义类类型的属性(如:property)，getter和setter方法就是getP...
属性声明（property declarations）， 自定义属性，自动生成 get　和　set 方法，getter 和 setter...
getElementsByName
你喜欢的明星有：
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)document.getElementsByName()与 document.getElementById()、document.getElementsByTagName()的区别 - 许乐 - 博客园
posts - 82, comments - 131, trackbacks - 0, articles - 1
document.getElementsByName()&&& 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。&document.getElementById()&&&&& 是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。&document.getElementsByTagName() 是根据控件TAG获取这个控件对象，返回的是一个对象数组。&例如：&HTML中有控件如下：&&&& &input type="radio" id="radio1" checked="checked" name="radiogroup1"& value="1"/&&&&& &input type="radio" id="radio2" name="radiogroup1" value="2"/&&&&& &input type="radio" id="radio3" name="radiogroup1" value="3"/&&则：&&document.getElementsByName('radiogroup1') 取得的是这三个控件，可以用 & & &document.getElementsByName('radiogroup1')[0] 取得的是第一个控件。&&document.getElementById('radio1')取得的是第一个控件，&&document.getElementsByTagName('input') 取得的是这三个控件，可以用document.getElementsByTagName('input')[0] 取得的是第一个控件。&getElementsByName('delID')返回的是所有名称为'delID'的控件组成的数组，数组就是一种集合。