每一個HTML元素都使用id來進行一個標注，隨后可以通過document.getElementById(“ID名稱”)取得指定的ID元素對象，取得元素對象之后就可以對其進行操作。
但是document.getElementById()只能取得一個元素信息。
范例：觀察如下代碼
event1.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <title>javascript的程序開發之事件處理</title> <script type="text/javascript" src="event1.js"></script> </head> <body> <div id="infoTab"> <table border="1" cellPadding="5" cellspacing="0" bgcolor="F2F2F2" width="50%"> <tr id="infoTr"> <td>姓名</td> <td>年齡</td> <td>學歷</td> </tr> <tr id="infoTr"> <td>張三</td> <td>20</td> <td>小學</td> </tr> <tr id="infoTr"> <td>李四</td> <td>21</td> <td>初中</td> </tr> <tr id="infoTr"> <td>王五</td> <td>22</td> <td>高中</td> </tr> <tr id="infoTr"> <td>趙六</td> <td>23</td> <td>大學</td> </tr> </table> </div> </body> </html>
此時代碼之中，最為方便的做法是所有的行都是用了一個id標注”id=infoTr”
范例：不完整的程序，每次只能單獨改變一個單元格的高亮色
event1.js
/** *obj: 要改變顏色的對象 *color: 要改變成的顏色 */ function changeColor (obj,color) { if (obj != undefined) { obj.bgColor = color; }; } window.onload = function(){ //動態的綁定事件 //取出tr元素對象 var trObj = document.getElementById('infoTr'); //只能給一個tr綁定事件，因為id是唯一的 //綁定鼠標進入事件 trObj.addEventListener('mouseover',function(){ changeColor(this,'red'); },false); //綁定鼠標離開事件 trObj.addEventListener('mouseout',function(){ changeColor(this,'F2F2F2'); },false); }
效果是：當鼠標只有進入第一個單元格時，高亮色成了紅色，離開就變為原來的顏色
分析：本程序使用了“document.getElementById(“infoTr”)”取得了id對象，但是在代碼中對於這個“infoTr”的Id值有多個，而document.getElementByiD(“infoTr“)，只能夠取得第一個，多以如果要想取得全部，則應該采用document.all(“iD”)形式完成(指的是id有重復的時候),返回的是對象數組。
范例：完整的程序，可以改變所有單元格的高亮色
event1.js
/** *obj: 要改變顏色的對象 *color: 要改變成的顏色 */ function changeColor (obj,color) { if (obj != undefined) { obj.bgColor = color; }; } window.onload = function(){ //動態的綁定事件 //取出tr元素對象數組 var trObj = document.all('infoTr'); //給所有的tr綁定事件,通過id取出的是一個對象數組 for (var i = 0; i < trObj.length; i++) { //綁定鼠標進入事件 trObj[i].addEventListener('mouseover',function(){ changeColor(this,'red'); },false); //綁定鼠標離開事件 trObj[i].addEventListener('mouseout',function(){ changeColor(this,'F2F2F2'); },false); }; }
效果是：當鼠標進入任意一個單元格時，高亮色成了紅色，離開就變為原來的顏色
如果使用DOM解析之后會有更加方便的做法，但是現階段一定要記住，只能夠依靠id取得內容。如果id只有一個，就使用document.getElementById(“iD”)返回單個對象；如果使用document.all(“iD”)，就返回一個對象數組。