Javascript中getElementById与getElementsByName与getElementsByTagName的不同

来源：互联网发布：斜率优化编辑：程序博客网时间：2024/05/29 02:12

工作了一段时间发现，不少人对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[i].name + "=" + obj.elements[i].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[i].name + "=" + obj[0].elements[i].value;
   }
   alert(strElements);
}
function test_getElementsByTagName() {
   var obj = document.getElementsByTagName("td");  //这里还可以是"tr", "input"之类的标签
   var strElements = "";
   for (i=0;i<obj.length;i++){
    strElements += "&" + obj[i].name + "=" + obj[i].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"/>   
   <input type="button" name="btn_close" onclick="window.close()" value="Close"/>
</div>
</form>
</body>
</html>