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

首先我们来看个示例：

代码如下:

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

赞 (0)

相关推荐

  • document.forms用法示例介绍

    概述 forms 返回一个集合 (一个HTMLCollection对象),包含了了当前文档中的所有form元素. 语法 var collection = document.forms; 例子 获取表单信息 <script type="text/javascript"> $(function(){ var thisForm = document.forms['form1']; //获取name为form1的form表单 //或者 //var thisForm = docume

  • 没有document.getElementByName方法

    首先声明的是: document.getElementByName方法没有.document.getElementsByName得到的是标签的数组 document.getElementId得到的是某一个标签 <form name="form_write"> <input name="content" type="text"> 然而可以用很浅显的方式得到如: var fn = document.getElementsByN

  • document.forms[].submit()使用介绍

    document.forms['exportServlet'].submit(); (1)document.forms:表示获取当前页面的所有表单 (2)document.forms[0]:表示获取当前页面的第一个表单 (3)document.forms['exportServlet']:表示获取当前页面的name="exportServlet"的表单 (4)submit()表示提交函数

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

    首先我们来看个示例: 复制代码 代码如下: <form name="buyerForm" method="post" action="/mysport/control/user/list.do"> <input type="checkbox" id="usernames" value="testtest" >testtest<br> <input

  • JavaScript中document对象使用详解

    对象属性 复制代码 代码如下: document.title                 //设置文档标题等价于HTML的<title>标签 document.bgColor               //设置页面背景色 document.fgColor               //设置前景色(文本颜色) document.linkColor             //未点击过的链接颜色 document.alinkColor            //激活链接(焦点在此链接上)的

  • 解析JavaScript中 querySelector 与 getElementById 方法的区别

    解析JavaScript中 querySelector 与 getElementById 方法的区别

    目录 1. 概述 1.1 querySelector() 和 querySelectorAll() 的用法 1.2 getElement(s)Byxxxx 的用法 2. 区别 2.1 getElement(s)Byxxxx 获取的是动态集合,querySelector 获取的是静态集合 2.2 接收的参数不同 2.3 浏览器兼容不同 2.4 querySelector 属于 W3C 中的 Selectors API 规范 ,而 getElementsBy 系列属于 W3C 的 DOM 规范 1.

  • 关于Javascript中document.cookie的使用

    设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; 如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如: document.cookie="userId=828; userName=hulk"; 在cookie的名或值中不能使用分号(;).逗号(,).等号(=)以及空格. 在cookie的名中做到这点很容易,但要保存的值是不确定的

  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    前言 本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨,感兴趣的同学参考下. 关于隐藏来路 Referrer 在某些情况下很有用,国外网赚界使用的非常广泛.比如流量提供方由于不想让联盟知道自己的流量来源,就需要隐藏自己来源网站的 referer. document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多,包

  • JavaScript中call和apply方法的区别实例分析

    本文实例分析了JavaScript中call和apply方法的区别.分享给大家供大家参考,具体如下: 这两个方法不经常用,但是在某些特殊场合中是非常有用的,下面主要说下它们的区别: 1.首先,JavaScript是一门面向对象的语言,也就是说它有this的概念.而且JavaScript是一门动态类型语言,为什么说它是动态类型语言呢?因为JavaScript在编译时没有类型检查的过程,不会去检查创建的对象类型,也不会去检查传递的参数类型,所以它的变量类型在运行期间是可以改变的. 2.要知道call

  • JavaScript中递归实现的方法及其区别

    递归函数:递归函数是在通过名字调用自身的情况下构成的. 递归实现阶乘函数: 方法一:通过使用函数的名字 function factorial(num){ if(num<=1){ return 1; }else{ return num*factorial(num-1); } } console.log(factorial(4)); 结果为:24: 但是这种方法实现递归有一个问题,观察以下代码: function factorial(num){ if(num<=1){ return 1; }els

  • JavaScript中值类型和引用类型的区别

    JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不是字符串,更不是布尔值.它们通常分别代表了各自特殊类型的唯一成员.JavaScript中除了数字.字符串.布尔值.null和undefined之外的就是对象了. JavaScript中值类型和引用类型的区别 JavaScript中的值类型的值是不可变的: 任何方法都无法改变值类型的值.数字.布尔值.

  • 深入理解关于javascript中apply()和call()方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的"偏见",因为这对您来说绝对是一片新大陆,让JavaScrip慢慢融化以前一套凝固的编程意识,注入新的生机! 好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.

  • JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b:' + b);//无法输出 2.var定义的变量可以修改,

随机推荐