JavaScript：通过id来进行元素的取得

刺骨的言语ヽ痛彻心扉 2024-02-19 17:38 17阅读 0赞

每一个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>

![791499-20160831151223090-1203509343.png][]

此时代码之中，最为方便的做法是所有的行都是用了一个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);
    }

效果是：当鼠标只有进入第一个单元格时，高亮色成了红色，离开就变为原来的颜色

![791499-20160831151327308-1556406213.png][]

分析：本程序使用了“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);
        };
    }

效果是：当鼠标进入任意一个单元格时，高亮色成了红色，离开就变为原来的颜色

![791499-20160831151456605-312860068.png][] ![791499-20160831151502090-1028719976.png][]

如果使用DOM解析之后会有更加方便的做法，但是现阶段一定要记住，只能够依靠id取得内容。如果id只有一个，就使用document.getElementById(“iD”)返回单个对象；如果使用document.all(“iD”)，就返回一个对象数组。

[791499-20160831151223090-1203509343.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/51a89f7a3cfc45d8a4fc4a773dfb9b55.png
[791499-20160831151327308-1556406213.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3396a815ed3c4d05840c226301d3077c.png
[791499-20160831151456605-312860068.png]: https://images2015.cnblogs.com/blog/791499/201608/791499-20160831151456605-312860068.png
[791499-20160831151502090-1028719976.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/aa86e65d332d45d2a5c70bfbca593c6b.png