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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JS判定是否原生方法
Jul 22 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
微信小程序实现签到功能
Oct 31 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
JavaScript原型对象原理与应用分析
Dec 27 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
缓存技术详谈―php
2006/12/14 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
微信小程序实现签到功能
2018/10/31 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python 的 with 语句详解
2014/06/13 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Python中请不要再用re.compile了
2019/06/30 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python必须了解的35个关键词
2020/07/16 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
工作中个人的自我评价
2013/12/31 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
总结Pyinstaller打包的高级用法
2021/06/28 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
一起来学习Python的元组和列表
2022/03/13 Python