Document:getElementsByName()使用方法及示例


Posted in Javascript onOctober 28, 2013

定义和用法

getElementsByName() 方法可返回带有指定名称的对象的集合。
语法document.getElementsByName(name)

该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。

另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

实例

<html> 
<head> 
<script type="text/javascript"> 
function getElements() { 
var x=document.getElementsByName("myInput"); 
alert(x.length); 
} 
</script> 
</head> 
<body> 
<input name="myInput" type="text" size="20" /><br /> 
<input name="myInput" type="text" size="20" /><br /> 
<input name="myInput" type="text" size="20" /><br /><br /> 
<input type="button" onclick="getElements()"value="How many elements named 'myInput'?" /> 
</body> 
</html>

getElementById,它也是只有document对象才能使用,而且返回的是数组的第一个元素,呵呵,它的方法名都写明了是getElement而不是getElements,所以,千万不要搞浑了.getElementsByName返回的是所有name为指定值的所有元素的集合

“根据 NAME 标签属性的值获取对象的集合。”集合比数组要松散的多, 集合里每个子项的类型可以不同, 集合只是把某些元素放在一起作为一类来使用, 相比之下数组就严格多了, 每个子项都是统一的类型. document.getElementsByName, document.getElementsByTagName, document.formName.elements 这类方法所得到的结果都是集合.用于批量更新时的数据传递.

Javascript 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
JavaScript网页定位详解
Jan 13 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
JS截取字符串常用方法详细整理
Oct 28 #Javascript
js自动生成对象的属性示例代码
Oct 28 #Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 #Javascript
javascript:void(0)的作用示例介绍
Oct 28 #Javascript
jsonp原理及使用
Oct 28 #Javascript
JS实现一键回顶功能示例代码
Oct 28 #Javascript
简单的js表单验证函数
Oct 28 #Javascript
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP实现微信退款功能
2018/10/02 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python中的各种装饰器详解
2015/04/11 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
初中生自我鉴定
2014/02/04 职场文书
质量主管工作职责
2014/09/26 职场文书
公司会议开幕词
2016/03/03 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python