当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript下一种表单元素获取方法存在的问题

Javascript
提高网站信任度的技巧
javascript脚本编程解决考试分数统计问题
图片上传之前检查大小、尺寸、格式并预览的js代码
JavaScript打开客户端exe文件的代码
JavaScript confirm选择判断
javascript title闪动效果
javascript把15位身份证转成18的函数
新人报道,发个小技巧(js数组重复判断)
Javascript this关键字使用分析
javascript TextArea动态显示剩余字符
JavaScript Undefined,Null类型和NaN值区别
javascript Select标记中options操作方法集合
javascript trim 去空格函数实现代码
javascript网页关闭时提醒效果脚本
checkbox 多选框 联动实现代码
收集的比较全的automation服务器不能创建对象 异常原因和解决方法
Javascript客户端将指定区域导出到Word、Excel的代码
IE浏览器兼容Firefox的JS脚本的代码
在html页面中包含共享页面的方法
javascript replace()用法详解附实例代码

Javascript 中的 javascript下一种表单元素获取方法存在的问题


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 415 ::
收藏到网摘: n/a

在工作中, 我常看到这样一种获取表单元素的方法:var eles = document.forms['表单名'].elements['元素名']; 如果对获取到的结果进行遍历操作, 那么, 我要告诉你: 小心, eles.length的值可能为undefined. 一. 测试环境
浏览器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3
二. 例子
复制代码 代码如下:

<form name="test-form" action="" method="">
<input type="checkbox" name="kk">
<form>
<script type="text/javascript">
var oForm = document.forms['test-form'],
eles = oForm.elements['kk'];
alert(eles.length); // undefined
alert(eles.nodeType); // 1
</script>

三. 解决方法(我想到的方法是改变获取方式, 基于YUI)
复制代码 代码如下:

<script type="text/javascript">
var oForm = document.forms['test-form'],
eles = YAHOO.util.Dom.getElementsBy(function(el) {
return el.type === 'checkbox' && el.name === 'kk';
}, 'input', oForm);
alert(eles.length); // 1
</script>


document.formname.inputname
这个问题我之前已经遇到过一次了,但是这次又忘记了,依然又犯错了,所以我必须要记录一下。
看一下这个例子:
复制代码 代码如下:

<form name="hehe">
<input type="checkbox" name="haha" />
</form>
<form name="hehe2">
<input type="checkbox" name="haha" />
<input type="checkbox" name="haha" />
</form>
<script type="text/javascript">
document.write(document.hehe.haha.length);
document.write('<br />');
document.write(document.hehe2.haha.length);
</script>

演示

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

在获取表单的input时,我一般都习惯这么做,但是这样做往往就出现问题了,因为很多时候我会去对比已选的checkbox和所有的 checkbox数量是否相等,但是只有一个的时候就会出错,因为它返回的就是checkbox本身,并没有length这个属性,所以我们需要先判断所取到的input是否有length属性以便进一步操作。
另外记录下location.reload(),它还有一个可选参数,true或者false,如果省略或者设置为false,它就会用HTTP头 If-Modified-Since来检测服务器上的文档是否已改变。如果文档已改变,reload()会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果设置为true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。就是传说中的强制刷新。