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 相关文章推荐
JScript的条件编译
May 29 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
jquery使用经验小结
May 20 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
基于vue.js实现购物车
Jan 15 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
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
ext jquery 简单比较
2010/04/07 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
浅析Python中else语句块的使用技巧
2016/06/16 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Django添加feeds功能的示例
2018/08/07 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
食品营养与检测应届生求职信
2013/11/08 职场文书
预备党员综合考察材料
2014/05/31 职场文书
迟到检讨书
2015/01/26 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
python爬虫--selenium模块
2021/03/31 Python
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS