不少人对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++){
}
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++){
}
alert(strElements);
}
function test_getElementsByTagName() {
var obj = document.getElementsByTagName("td"); //这里还可以是"tr", "input"之类的标签
var strElements = "";
for (i="0;i<obj.length;i++){
}
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>