JavaScript中通过getElementsByName访问name集合对象

Dear 丶 2022-08-04 11:47 100阅读 0赞

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="我中奖了，中了一个亿" οnclick="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].οnclick=function(){
    				alert(this.value);
    			}
    		}
    	</script>
    </body>
    </html>

3、因为在html页面中，name不能唯一确定一个元素，所以方法的名称为getElementsByName而不是getElementByName