DOM ------ 鼠标滑过表格的行变色效果

    //css代码
    table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;  /* 合并边框模型 */
            font-size: 14px;
        }
        thead tr{
            height: 3px;
            background-color: skyblue;
        }
        tbody tr {
            height: 30px;
        }
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg{
            background-color: pink;
        }
        //html代码
        <table>
          <thead>
              <tr>
                  <th>代码</th>
                  <th>名称</th>
                  <th>日期</th>
                  <th>密码</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>0307</td>
                  <td>0821</td>
                  <td>2021</td>
                  <td>0618</td>
              </tr>
              <tr>
                  <td>0307</td>
                  <td>0821</td>
                  <td>2021</td>
                  <td>0618</td>
              </tr>
              <tr>
                  <td>0307</td>
                  <td>0821</td>
                  <td>2021</td>
                  <td>0618</td>
              </tr>
          </tbody>
      </table>
      //js代码
      // 1.获取元素 获取的是 tbody里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr')
        // 2.利用循环绑定注册事件
        for(var i=0;i<trs.length;i++){
            // 3.鼠标经过事件 onmouseover
            trs[i].onmouseover = function(){
                this.className = 'bg'
            }
            // 4.鼠标离开事件
            trs[i].onmouseout = function() {
                this.className = ''
            }
        }