JavaScript中document.forms[0]与getElementByName区别


Posted in Javascript onJanuary 21, 2015

首先我们来看个示例:

<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>

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.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',返回的是第一个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.

Javascript 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jquery使用经验小结
May 20 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 #Javascript
JavaScript的内存释放问题详解
Jan 21 #Javascript
script标签属性用type还是language
Jan 21 #Javascript
JS交换变量的方法
Jan 21 #Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 #Javascript
js实现DOM走马灯特效的方法
Jan 21 #Javascript
浅谈javascript 迭代方法
Jan 21 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
Python模块常用四种安装方式
2020/10/20 Python
类、抽象类、接口的差异
2016/06/13 面试题
如何写一封打动人心的求职信
2014/02/17 职场文书
产品生产计划书
2014/05/07 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
新手初学Java List 接口
2021/07/07 Java/Android