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如何获取复选框的值
Dec 12 Javascript
JQuery教学之性能优化
May 14 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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
德劲1103二次变频版的打磨
2021/03/02 无线电
也谈 PHP 和 MYSQL
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
php Session无效分析资料整理
2016/11/29 PHP
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
儿童编程python入门
2018/05/08 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
会计毕业生自荐信
2013/11/21 职场文书
人事助理自荐信
2014/02/02 职场文书
保险公司增员口号
2015/12/25 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python