javascript的getElementsByName()的应用

来源：互联网发布：电子商务网站源码编辑：程序博客网时间：2024/06/06 16:02

<html>

<head>
<title>getElementByName</title>
</head>
<body>
<form name="from1" action="text.html" method="post">
<input type="text" name="username" value="Id1" id="tid1" onchange="change()"/><br/>
<input type="text" name="username" value="Id2" id="tid2"/><br/>
<input type="text" name="username" value="Id3" id="tid3"/><br/>
<input type="button" name="ok" value="baocun"/>
</form>
</body>
<script language="JavaScript">
//通过元素的name属性获取所有元素的引用
var inputgetElements=document.getElementsByName("username");

//测试该数据的长度

alert(inputgetElements.length);

//遍历元素，输出所有value属性的值

//for(var i=0;i<inputgetElements.length;i++){
//var inputgetElement=inputgetElements[i];
//alert(inputgetElement.value);
//}

//为每个文本框（<input type="text"/>）增加change事件，当值改变时，输出改变的值

//改一个
function change(){
alert(document.getElementById("tid1").value);
}
//同时改三个
for(var i=0;i<inputgetElements.length;i++){//先获取有多少个input,讲他进行遍历
var inputgetElement=inputgetElements[i];
//把onchange相当于一个属性
//为每一个文本框注册onchange事件
inputgetElement.onchange=function(){
//this表示当前的对象

alert(this.value); //其实通过getElementById也可以获取到单个的 getElementsByName是获取到一个集合上面是由getElementsByName获取到的

if(this.value.length>6){
alert("www");//这个是当输入的长度超过6的时候输出
}else{
this.value="";//没有满这个长度就将刚用户输的清空
}
}

}

</script>
</html