DOM绑定点击事件操作中的常见问题

前言：最近动手操作了几个入门的DOM练习题，虽说量不多，知识点大体也都了解，但如何输入正确的代码却仍让我苦苦思索，直到得到指点才豁然开朗，现在我就通过几个例子，记录一下我的傻逼操作注意事项

任务：实现表格单行内容的删除操作

如图所示，点击删除按钮，将该行元素全部删除

思路： 之前所学的行列结构用的是ul和li列表标签，但这个题用表单标签看上去更合适，所以尝试使用table标签。

table为简单表格标签，其中元素包括一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）。最后我将代码写成了这样：

<table border="1px" width="1070px" cellspacing="0" align="center">
    <tr style="background-color: gray;height: 50px;">
        <th>编号id</th>
        <th>合同编号</th>
        <th>公司名称</th>
        <th>联系人</th>
        <th>联系电话</th>
        <th>合同类型</th>
        <th>合同状态</th>
        <th>负责业务</th>
        <th>设备数量</th>
        <th>操作</th>
    </tr>
    <tr class="info">
        <td>1</td>
        <td>ht-20170718982766</td>
        <td>北京艾尔科技有限公司</td>
        <td>xxx</td>
        <td>xxxxxxxxxx</td>
        <td>
            <button id="contract">标准</button>
        </td>
        <td>未生效</td>
        <td>张三</td>
        <td>3</td>
        <td class="do">
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
        </td>
    </tr>

scrip代码要实现的目标：
1、点击删除按钮，删除这一行；
2、点击.delete按钮,用table删除tr；

<script>
    var table = document.getElementsByTagName("tbody")[0];
    var dels = document.getElementsByClassName("delete");
    for(var i=0;i<dels.length;i++){
        dels[i].onclick = function(){
            table.removeChild(this.parentNode.parentNode);
        }
    }
</script>

代码分析：

1. var table = document.getElementsByTagName("tbody")[0];
   注意，getElementsByTagName功能是根据标签名获得一个类集合，注意是一个集合！elements！代码中我们只要一个table，也就是第一个，所以后面加上[0]；
   同时还要注意，table表单对应的标签名为tbody而不是table，读者可以自己将上述HTML代码运行后在浏览器检查源代码，你会发现代码中多出了个tbody标签；

2. var dels = document.getElementsByClassName("delete");
   这里我们获取的dels也是一个类集合，但代码中有多个删除按钮，和上面只有一个table标签不一样，所以接下来要使用循环来判断哪一个是目标按钮；

3. for(var i=0;i<dels.length;i++){
      dels[i].onclick = function(){
         table.removeChild(this.parentNode.parentNode);
      }
   }
   

   ​ 这里最最需要注意的是，运行到function函数中后，原先所使用的dels[i]不能再使用了，要想表达这个指定元素应该使用this，否则就会报如下错误：

   Uncaught TypeError: Cannot read properties of undefined (reading ‘parentNode’) at HTMLButtonElement.dels.
   .onclick

​具体原因可以看这位博主的解释：https://blog.csdn.net/fernwehseven/article/details/121653873

​总之，记住.onclick后面的function函数中用this代表选中的元素。