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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
Three.js学习之网格
Aug 10 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
用VsCode编辑TypeScript的实现方法
May 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript模拟push
2016/03/06 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
python opencv之分水岭算法示例
2018/02/24 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python字符串格式化方式解析
2019/10/19 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python em算法的实现
2020/10/03 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
教师先进工作者事迹材料
2014/05/01 职场文书
劳动竞赛口号
2014/06/16 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
会议通知
2015/04/15 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书