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组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
javascript实现简易计算器
Feb 01 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
《javascript少儿编程》location术语总结
May 27 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
python optparse模块使用实例
2015/04/09 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
大学生入党群众意见书
2015/06/02 职场文书
结婚典礼主持词
2015/06/29 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
怎样写好工作计划
2019/04/10 职场文书