首页 >  应用与开发  >  HTML+CSS+Javascript

Javascript中getElementById与getElementsByName与getElementsByTagName的不同

发布日期:2010-01-27 

不少人对Javascript中获取网页中HTML元素getElementById(参数),getElementsByName(参数),getElementsByTagName(参数)这几个方法混淆不清。特地查了些资料,写下这篇文章供大家分享。

getElementById(参数)---根据页面项目的id,取得该对象,对象是唯一的。

getElementsByName(参数)---根据页面项目的名字,取得所有name为指定值的对象集合。

getElementsByTagName(参数)---根据页面中Tag元素,取得所有指定相同的Tag元素对象集合。传入的参数都是页面中Tag元素,例如:input, tr, td等。


由上面的说明可以得知,在使用这三个函数后,由于得到的对象后两个是集合,第一个不是集合,所以此后的处理也不相同:对于集合,必须指定集合中的确定单元项目。
例子如下:遍历某一表单,取得该表单元素
<html>
  <head>
    <script language="javascript">
    //test function "getElementById"
    function test_getElementById() {
   var obj = document.getElementById("f1");
   var strElements = "";
   for (i="0;i<obj.elements.length;i++){     strElements += "&" + obj.elements[1].name + "=" + obj.elements[1].value;
   }
   alert(strElements);
  }
  //test function "getElementsByName"
  function test_getElementsByName() {
   var obj = document.getElementsByName("f1");
   var strElements = "";
   //由于得到的是表单集合(本例中只有一个表单),所以在使用时需要objs[0]这样的形式
   for (i="0;i<obj[0].elements.length;i++){     strElements += "&" + obj[0].elements[1].name + "=" + obj[0].elements[1].value;
   }
   alert(strElements);
  }
  function test_getElementsByTagName() {
   var obj = document.getElementsByTagName("td");  //这里还可以是"tr", "input"之类的标签
   var strElements = "";
   for (i="0;i<obj.length;i++){     strElements += "&" + obj[1].name + "=" + obj[1].value;
   }
   alert(strElements);
  }
  function testAll() {
   alert("Call function test_getElementById");
   test_getElementById();
   alert("Call function test_getElementsByName");
   test_getElementsByName();
   alert("Call function test_getElementsByTagName");
   test_getElementsByTagName();
  }
 </script>    
  </head>
  <body class="subBody" id="subBody" onload="">
    <form id="f1">
    <div id="title" align="center">JavaScript Function Test Sample</div>
    <table id="tb1" align="center">
   <tr name="first_line">
    <td name="cell_1" value="td1"><a href="#" onclick="test_getElementById()">test_getElementById</a></td>
    <td name="cell_2"><a href="#" onclick="test_getElementsByName()">test_getElementsByName</a></td>
   </tr>
   <tr name="second_line">
    <td name="cell_3"><a href="#" onclick="test_getElementsByTagName()">test_getElementsByTagName</td>
   </tr>
  </table>
  <div id="btn_area" align="center">
   <input type="button" name="btn_test" onclick="testAll()" value="TestAllFunction"/>&nbsp;&nbsp;&nbsp;
   <input type="button" name="btn_close" onclick="window.close()" value="Close"/>
  </div>
  </form>
  </body>
</html>