顧明思義，get-Element-By-Id，就是通過ID來設置/返回HTML標簽的屬性及調用其事件與方法。用這個方法基本上可以控制頁面所有標簽，條件很簡單就是給每個標簽分配一個ID號
document.getElementById("link").href;
document.getElementById("link").target;
document.getElementById("img").src;
document.getElementById("img").width;
document.getElementById("img").height;
document.getElementById("input").value;
那么如何取得<div></div>以及<a></a>之間的值呢？如<div id="div">aaa</div>中的aaa，<a href="#" id="link">bbb</a>中的bbb，也很簡單，利用innerHTML就可以了：
document.getElementById("div").innerHTML;
document.getElementById("link").innerHTML;
getElementById 方法
返回具有指定 ID 屬性值的第一個對象的一個引用。
語法
oElement = document.getElementById(sIDValue)
參數
sIDValue 必選項。指明 ID 屬性值的字符串
返回值
返回 ID 屬性值與指定值相同的第一個對象。
注釋
如果 ID 屬於一個集合，getElementById 方法返回集合中的第一個對象。
getElementById 方法與使用 all 集合上的 item 方法等同。例如，以下代碼樣本表示如何從 document 對象中取回 ID 為 oDiv 的第一個要素。
使用 DHTML 對象模型：
var oVDiv = document.body.all.item("oDiv");
使用文檔對象模型(DOM)：
var oVDiv = document.getElementById("oDiv");
示例
以下例子表示如何使用 getElementById 方法返回 ID 屬性值 oDiv 的第一次出現。
<script>
function fnGetId(){
// Returns the first DIV element in the collection.
var oVDiv=document.getElementById("oDiv1");
}
</script>
<DIV ID="oDiv1">Div #1</DIV>
<DIV ID="oDiv2">Div #2</DIV>
<DIV ID="oDiv3">Div #3</DIV>
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">
getElementById 方法
返回具有指定 ID 屬性值的第一個比如說有個網頁中有個text框的id叫text1
getElementById(text1)就能得到這個text1框的對象,並使用text框的所有屬性和方法
這個是JS的一個方法，意思是通過控件ID取得元素的值，如一個form里包函text、label等，他們都是FORM的元素，有一個分配的ID，getElementById()是取得這些元素的text值的。
1 <html>
<head>
<script type="text/javascript">
function alignRow()
{ var x=document.getElementById('myTable').rows x[0].align="right" }
</script>
</head>
<body>
<table width="60%" id="myTable" border="1">
<tr>
<td>行1 單元格1</td>
<td>行1 單元格2</td>
</tr>
<tr>
<td>行2 單元格1</td>
<td>行2 單元格2</td>
</tr>
<tr>
<td>行3 單元格1</td>
<td>行3 單元格2</td>
</tr>
</table>
<form>
<input type="button" onclick="alignRow()" value="右對齊第一行文字">
</form>
</body>
</html>
只對一個單元隔進行對齊
1 <html> 2 3 <head> 4 <script 5 type="text/javascript"> function alignCell() { var x = document.getElementById('myTable').rows[0].cells x[0].align = "center" }</script> 6 </head> 7 8 <body> 9 <table id="myTable" border="1" width="100%"> 10 <tr> 11 <td>單元格1</td> 12 <td>單元格2</td> 13 </tr> 14 <tr> 15 <td>單元格3</td> 16 <td>單元格4</td> 17 </tr> 18 </table> 19 <form> <input type="button" onclick="alignCell()" value="居中對齊第一個單元格的內容"> </form> 20 </body> 21 22 </html>
改變colspan的值
1 <html> 2 3 <head> 4 <script 5 type="text/javascript"> function setColSpan() { var x = document.getElementById('myTable').rows[0].cells x[0].colSpan = "2" x[1].colSpan = "6" }</script> 6 </head> 7 8 <body> 9 <table id="myTable" border="1"> 10 <tr> 11 <td colspan="4">單元格1</td> 12 <td colspan="4">單元格2</td> 13 </tr> 14 <tr> 15 <td>單元格3</td> 16 <td>單元格4</td> 17 <td>單元格5</td> 18 <td>單元格6</td> 19 <td>單元格7</td> 20 <td>單元格8</td> 21 <td>單元格9</td> 22 <td>單元格10</td> 23 </tr> 24 </table> 25 <form> <input type="button" onclick="setColSpan()" value="改變colspan值"> </form> 26 </body> 27 28 </html>