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 相关文章推荐
js控制浏览器全屏示例代码
Feb 20 Javascript
JS解析XML实例分析
Jan 30 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
Vue深入理解插槽slot的使用
Aug 05 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的cms
2010/12/19 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python读取Excel表格文件的方法
2019/09/02 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
服装店员工管理制度
2015/08/07 职场文书