js中通过getElementsByName访问name集合对象的方法


Posted in Javascript onOctober 31, 2016

1、查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合。

2、这个集合可以作为数组来对待,length属性的值表示集合的个数。

3、因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
	<p>
		<input type="text" name="luck" value="我中奖了,中了一个亿" onclick="aa()" id="luck1" />
	</p>
	<p>
		<input type="text" name="luck" value="我交了女朋友" id="luck2" />
	</p>
	<p>
		<input type="text" name="luck" value="我升迁了" id="luck3" />
	</p>
	<p>
		<input type="text" name="luck" value="我买房了" id="luck4" />
	</p>
	
	<script>
		/*
		1、获取每一个文本框的值
		2、获取每一个文本框的类型
		3、为每一个文本框增加点击事件
		*/
		
		/*
			第一步 获取name属性为luck值得对象数组(节点数组)
		*/
		var luckElements = document.getElementsByName("luck");
		
		/*
			第二步 遍历节点数组
		*/
		for(var i=0;i<luckElements.length;i++){
			//获取元素的value值
			alert(luckElements[i].value);
			//获取元素的type值
			alert(luckElements[i].type);
			//为每一个元素的onclick属性赋值即为文本框增加点击事件
			luckElements[i].onclick=function(){
				alert(this.value);
			}
		}
	</script>
</body>
</html>

3、因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName

以上就是小编为大家带来的JavaScript中通过getElementsByName访问name集合对象的方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
微信小程序实现星级评价
Nov 20 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
JavaScript递归操作实例浅析
Oct 31 #Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 #Javascript
Validform表单验证总结篇
Oct 31 #Javascript
Javascript数组中push方法用法分析
Oct 31 #Javascript
JavaScript中的await/async的作用和用法
Oct 31 #Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 #Javascript
微信小程序 开发工具快捷键整理
Oct 31 #Javascript
You might like
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
详解Python迭代和迭代器
2016/03/28 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python实现小球弹跳效果
2019/05/10 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
请介绍一下Ant
2016/07/22 面试题
个人教师自我评价范文
2013/12/02 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
五四青年节的活动方案
2014/08/20 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
个人求职意向书
2015/05/11 职场文书
队名及霸气口号大全
2015/12/25 职场文书
2019年教师入党申请书
2019/06/27 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL