JavaScript中document.forms[0]与getElementByName区别
作者:hebedich 发布时间:2024-04-17 09:55:58
首先我们来看个示例:
<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.
猜你喜欢
- <body> <script> //关闭DIV MENU function MenuClose() { var Me
- 一、前言我用的是面向对象写的,把界面功能模块封装成类,然后在客户端创建对象然后进行调用。好处就是方便我们维护代码以及把相应的信息封装起来,每
- 本文实例介绍了基于python的Tkinter实现简易计算器的详细代码,分享给大家供大家参考,具体内容如下第一种:使用python 的 Tk
- 人民币和美元是世界上通用的两种货币之一,写一个程序进行货币间币值转换,其中:人民币和美元间汇率固定为:1美元 = 6.78人民币。程序可以接
- print函数是Python的入门,每一个学习python的人都绕不开这个函数,下面介绍一下这个函数的用法。打开电脑,选择python软件,
- 学了一天pygame,用python和pygame写一个简单的挡板弹球游戏GitHub:EasyBaffleBallGame# -*- co
- 先来看看微信读书的效果实现思路这个效果比较简单,主要是旋转view,然后在旋转结束后更换view的背景,考虑到需要旋转view,所以使用动画
- 最近微信迎来了一次重要的更新,允许用户对”发现”页面进行定制。不知道从什么时候开始,微信朋友圈变得越来越复杂,当越来越多的人选择”仅展示最近
- 一个功能的实现,可以用多种语句来实现,比如说:while语句、for语句、生成器、列表推导、内置函数等实现,然而他们的效率并不一样。写了一个
- 楔子我们用 MySQL 客户端查询数据的时候,是以下面这种格式显示的:内容展示的非常漂亮,而 Python 有一个第三方模块叫 pretty
- 一、截取子串-切片方法:字符串名[初始位置:结束位置:步长]str1 = 'abcdefg'print(str1[:]) #
- sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdat
- 前言事情是这样的:今天晚上,女朋友让我十二点催她睡觉。不过,可是我实在太困了,熬不下去…… 是吧
- 若对于同一数据库实例中的两个数据库进行同步则直接对数据库表创建Trigger。SQL Server 2005的联机帮助:Trigger on
- 开发环境:Ubuntu16.04+Django 1.11.9+Python2.7一:使用自定义函数输出日志到log文件:import tim
- 一.python读取txt文件最简单的open函数:# -*- coding: utf-8 -*-with open("test.
- WebSocket与HTTP协议的主要区别HTTP 和 WebSocket 协议的区别 HTTP 是单向的,而 WebSocket 是双向的
- 定义行为要定义行为,通过继承 yii\base\Behavior 或其子类来建立一个类。如:namespace app\components
- 数据集中的图像,一般不可用在以下3个方面:1.图像过小2.无法打开3.“Premature end of JPEG fi
- 写在之前这几天的阅读量蜜汁低,是什么原因我也没搞清楚,如果你们觉得我哪里写的有问题,或者是哪里不好,欢迎后台或者微信告知我,先行谢过。昨天的