标签元素的操作:doucment对象中方法getElementsByName(“name的属性值”)获取name属性值相同的元素,返回一个数组
案例如下:
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="清华大学100周年_1" id="tid_1"><br>
<input type="text" name="tname" value="清华大学100周年_2" id="tid_2"><br>
<input type="text" name="tname" value="清华大学100周年_3" id="tid_3"><br>
<input type="button" name="ok" value="保存1"/>
</form>
</body>
<script type="text/javascript">
//(1)通过元素的name属性获取所有元素的引用 name="tname"
//使用doucment对象中方法getElementsByName("name的属性值")获取name属性值相同的元素,返回一个数组
var tnameEleArr = document.getElementsByName("tname");
//测试该数据的长度
//alert(tnameEleArr.length);//3
//遍历元素,输出所有value属性的值
for(var i=0; i<tnameEleArr.length; i++){
//alert(tnameEleArr[i].value);
}
//(2)为每个文本框(<input type="text">)增加onchange事件,当值改变时,输出改变的值
//使用对象名.事件名称 = function(){} 给对象动态的添加事件
for(var i=0; i<tnameEleArr.length; i++){
//给每一个对象动态添加事件 事件的响应函数:事件被触发就会执行
tnameEleArr[i].onchange = function(){
//alert(tnameEleArr[i].value);//报错
//alert(tnameEleArr[0].value);
alert(this.value);
}
}
</script>
</html>
(2)中运用一个知识点:
使用对象名.事件名称 = function(){ } 给对象动态的添加事件
说明:alert(tnameEleArr[i].value);报错原因:
错误提示: TypeError: tnameEleArr[i] is undefined
当我们改变文本框中的内容,那么就会触发onchange事件。此时就会执行事件对应的响应函数,响应函数中alert(tnameEleArr[i].value);
但是:函数是什么时候执行呢?页面已经加载完毕了,触发事件才会执行。这时候页面加载完毕,那么循环就已经执行完毕了,i 的值(数组的索引)已经是3了。这时候我们执行时间的响应函数 tnameEleArr[3].value,没有索引3,所以就报错了。
解决(技巧):
可以使用this,代表当前的标签对象,哪个标签触发的事件,this就是哪个对象。