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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 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数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
鼠标图片振动代码
2006/07/06 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
Python 详解基本语法_函数_返回值
2017/01/22 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
keras之权重初始化方式
2020/05/21 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
土木工程专业大学毕业生求职信
2013/10/13 职场文书
打架检讨书2000字
2014/02/22 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
承诺书范文
2014/06/03 职场文书
高二化学教学反思
2016/02/22 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL