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封装的获取Url中的Get参数示例
Nov 26 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 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
Laravel框架使用Redis的方法详解
2018/05/30 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
JS读取XML文件示例代码
2013/11/15 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python实现ip地址的包含关系判断
2020/02/07 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
python 5个实用的技巧
2020/09/27 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
英语道歉信范文
2014/01/09 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
个人承诺书格式范文
2015/04/29 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL