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版本引发的问题解决
Oct 14 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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/10/31 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
10个php函数实用却不常见
2015/10/13 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python 获取网页编码方式实现代码
2017/03/11 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
python 5个顶级异步框架推荐
2020/09/09 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
小学作文评语大全
2014/04/21 职场文书
部门年终奖分配方案
2014/05/07 职场文书
培训科主任岗位职责
2014/08/08 职场文书
组织生活会发言材料
2014/12/15 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
欢迎词怎么写
2015/01/23 职场文书
会计人员岗位职责
2015/02/03 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python