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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
XENON基于JSON变种
Jul 27 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
jQuery手风琴的简单制作
May 12 jQuery
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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日期处理函数 整型日期格式
2011/01/12 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
详解php用static方法的原因
2018/09/12 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python爬虫的工作原理
2017/03/05 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
农贸市场管理制度
2014/01/31 职场文书
合作投资意向书
2014/04/01 职场文书
文体活动总结范文
2014/05/05 职场文书
保护地球的标语
2014/06/17 职场文书
单位工作证明
2014/10/07 职场文书
开除通知书范本
2015/04/25 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
创业计划书之烤红薯
2019/09/26 职场文书