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 相关文章推荐
javascript的console.log()用法小结
May 31 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php实现单链表的实例代码
2013/03/22 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
js闭包的用途详解
2014/11/09 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
详解python之heapq模块及排序操作
2019/04/04 Python
python如何删除文件中重复的字段
2019/07/16 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
文体活动总结范文
2014/05/05 职场文书
中国梦团日活动总结
2014/07/07 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
详解Python函数print用法
2021/06/18 Python
Python数据结构之队列详解
2022/03/21 Python