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实现小球的自由移动代码
Apr 22 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
小学生操行评语大全
2014/04/22 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
国庆阅兵观后感
2015/06/15 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
服务器间如何实现文件共享
2022/05/20 Servers