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 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
JavaScript中对象介绍
Dec 31 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
JavaScript中的函数式编程详解
Aug 22 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
详解Python:面向对象编程
2019/04/10 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
公司培训欢迎词
2014/01/10 职场文书
企业给企业的表扬信
2014/01/13 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
设置IIS Express并发数
2022/07/07 Servers