DOM（下）_获取dom下的子标签-CSDN博客

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        //1.获取所有的按钮
        let btns = document.querySelectorAll('button')

        //2.给每个按钮绑定click事件
        for(let i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                //2.1 排他第一步：清除所有按钮的背景色
                for(let j=0;j<btns.length;j++){
                    btns[j].style.backgroundColor = ''
                }
                //2.2 排他第二步：设置当前元素的样式效果
                this.style.backgroundColor = 'pink'   
            }  
        }
    </script>
</body>

示例2：鼠标经过时改变表格行的背景色

(1)鼠标经过事件：mouseover

(2)鼠标离开事件：

<style>
    .bg{
        background-color: pink;
    }
</style>
<body>
    <table border="1">
        <thead>
            <tr>
                <th width="100">学号</th>
                <th width="100">姓名</th>
                <th width="100">性别</th>
                <th width="100">地址</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>1001</td>
                <td>刘备</td>
                <td>男</td>
                <td>小沛</td>
            </tr>
            <tr align="center">
                <td>1002</td>
                <td>孙权</td>
                <td>男</td>
                <td>南京</td>
            </tr>
            <tr align="center">
                <td>1003</td>
                <td>曹操</td>
                <td>男</td>
                <td>许昌</td>
            </tr>
            <tr align="center">
                <td>1004</td>
                <td>司马懿</td>
                <td>男</td>
                <td>长安</td>
            </tr>
            <tr align="center">
                <td>1005</td>
                <td>赵云</td>
                <td>男</td>
                <td>常山</td>
            </tr>
        </tbody>
    </table>

    <script>
        //1.获取tbody下的所有行
        let trs = document.querySelector('tbody').querySelectorAll('tr');
        //2.给trs中每行绑定鼠标事件：mouseove、mouseout
        for(let i=0;i<trs.length;i++){
            trs[i].onmouseover = function(){ //鼠标经过行时变色
                this.className = 'bg'
            }
            trs[i].onmouseout = function(){ //鼠标离开行时去掉颜色
                this.className = ''
            }
        }
    </script>
</body>