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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
jquery实现显示已选用户
Jul 21 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
理解JavaScript原型链
Oct 25 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
vue+element实现表单校验功能
May 20 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 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生成文件
2007/01/15 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
Python日志模块logging简介
2015/04/13 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python中列表和元组的区别
2017/12/18 Python
python实现神经网络感知器算法
2017/12/20 Python
Python实现快速排序的方法详解
2019/10/25 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
单位委托书
2014/10/15 职场文书
无罪辩护词范文
2015/05/21 职场文书
田径运动会广播稿
2015/08/19 职场文书
党员公开承诺书2016
2016/03/24 职场文书
公证书
2019/04/17 职场文书
创业计划书之酒吧
2019/12/02 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
Redis分布式锁的7种实现
2022/04/01 Redis
Python pyecharts绘制条形图详解
2022/04/02 Python