案例：（DOM对象）document 文档对象之标签元素的操作（三）（getElementsByName("name的属性值")）

标签元素的操作：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就是哪个对象。