querySelectorAll()与getElementsByClassName的区别

前言

​最近在学习DOM操作，完成了一个如下图所示的小作业，写删除多个这个功能时遇到了一个小问题：选择两个元素进行删除时，点击按钮总是只删除一个就停止。后来发现使用了getElementsByName()方法获取DOM对象，当修改为querySelectorAll()方法时，就没有这个问题了。出错原因是对以上两种方法理解不透彻。

源码链接：https://download.csdn.net/download/weixin_39006917/12416662

接下来，对它们的区别进行解释说明。

区别

​ querySelectorAll()的实现类似于一组元素的快照，而并非对文档结构进行搜索的动态查询。

​ 快照：把某个时刻dom中的结构记录下来，而不是通过查询dom结构动态获取。

​ getElementsByClassName()是动态查询，若删除其中一个节点，dom结构会发生相应的改变。

测试

实现删除多个功能的代码（出错）

// "select"为每行元素中复选框的name属性值
function deleteMultiple