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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
js基于canvas实现时钟组件
Feb 07 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
PHP 第二节 数据类型之数值型
2012/04/28 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
javascript demo 基本技巧
2009/12/18 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python列表的逆序遍历实现
2020/04/20 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
教师旷工检讨书
2014/01/18 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
平安建设汇报材料
2014/12/29 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
网络研修心得体会
2016/01/08 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python