前言

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

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

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

区别

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

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

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

测试

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

// "select"为每行元素中复选框的name属性值
function deleteMultiple(){
    
    
    var select = document.getElementsByName("select"); 
    // 动态获取dom结构，删除一个后dom结构发生相应的改变
    for(var i=0;i<select.length;i++){
    
    
        if(select[i].checked)
        {
    
    
            select[i].parentNode.parentNode.remove();
        }//删除选中元素所在的行 
    }
    console.log(select);// 执行完删除操作后再输出select对象。
}

​
可以看到，当选中最上面两行后，点击【删除多个】按钮，最终只删除了第一行，且右侧控制台输出剩余两个节点。可以理解为，当执行一次删除操作后，dom结构已经发生了变化，程序便停止。只有再次点击按钮时，才会触发。

实现删除多个功能的代码（正确）

// "chk"为每行元素中复选框的类选择器名称
function deleteMultiple(){
    
    
    var chks = document.querySelectorAll(".chk");// 获取所有复选框对象
   
    for(var chk of chks){
    
    
        if(chk.checked){
    
                     
            chk.parentNode.parentNode.remove();
        }   //删除选中元素所在的行   
    }
    console.log(chks);   
}

​同样选中前两行元素后，点击【删除多个】按钮，成功得到我们想要的结果，而右侧控制台输出节点数仍为3个。
​
由此，我们可以看到两种方法的区别，使用getElementsByName方法获取对象，删除节点后，dom结构相应改变，节点数减少；使用querySelectorAll方法获取对象，删除节点后，当时获取的对象没有改变，节点数仍然为3，相当于在当时为dom结构拍快照。