Javascript chrome扩展，单击页面上的所有元素，仅更新一半

我正在尝试编写一个简单的扩展，以单击网页上具有相同元素名称的所有按钮，但是，当我打印控制台日志时，如果没有“updateArray[a].click（）”，它将打印正确的数组长度。但是当我添加“updateArray[a].click（）”返回时，它只单击了数组长度的一半，这很奇怪。为什么当我把那一行加回去的时候，它只点击了元素页面上按钮的一半，而当我把那一行加回去的时候，我的数组长度又减半了

function clickUpdate() {
    var updateArray = document.getElementsByClassName("updateButton");

     for(var a=0;a<updateArray.length;a++){ 
     updateArray[a].click(); 
     console.log("this is the array:" + a);
}
console.log("this is the array legnth: " + updateArray.length);
}
clickUpdate(); 

函数单击更新（）{
var updateArray=document.getElementsByClassName（“updateButton”）；
对于（var a=0；a执行
updateArray[a]的结果）。单击（）
从元素中删除
updateButton
类？因为
updateArray
实际上不是一个数组，它是一个HTMLCollection，如果您从它的任何元素中删除该类，它将发生变化…即，如果您从该集合中的任何元素中删除该类
updateButton
，则该集合将shr墨迹由1个成员-这就是为什么你最终只点击了一半的元素

我建议用这样的东西

function clickUpdate() {
    var updateArray = document.getElementsByClassName("updateButton");
    [].slice.call(updateArray).forEach(function(item) {
        item.click();
    });
    console.log("this is the array legnth: " + updateArray.length);
}
clickUpdate();

这将使用array#slice函数在updateArray中创建数据的（静态）副本，然后在此新数组上使用forEach进行单击

或者，如果使用
querySelectorAll
则最终得到的是
NodeList
——它不像
HTMLCollection
那样是一个“活动”列表，您可以通过`getElementsByClassName获得它

function clickUpdate() {
    var updateArray = document.querySelectorAll(".updateButton");

     for(var a=0;a<updateArray.length;a++){ 
     updateArray[a].click(); 
     console.log("this is the array:" + a);
}
console.log("this is the array legnth: " + updateArray.length);
}
clickUpdate(); 

函数单击更新（）{
var updateArray=document.querySelectorAll（“.updateButton”）；
对于（var a=0；a执行
updateArray[a]的结果）。单击（）
从元素中删除
updateButton
类？因为
updateArray
实际上不是一个数组，它是一个HTMLCollection，如果您从它的任何元素中删除该类，它将发生变化…即，如果您从该集合中的任何元素中删除该类
updateButton
，则该集合将shr墨迹由1个成员-这就是为什么你最终只点击了一半的元素

我建议用这样的东西

function clickUpdate() {
    var updateArray = document.getElementsByClassName("updateButton");
    [].slice.call(updateArray).forEach(function(item) {
        item.click();
    });
    console.log("this is the array legnth: " + updateArray.length);
}
clickUpdate();

这将使用array#slice函数在updateArray中创建数据的（静态）副本，然后在此新数组上使用forEach进行单击

或者，如果使用
querySelectorAll
则最终得到的是
NodeList
——它不像
HTMLCollection
那样是一个“活动”列表，您可以通过`getElementsByClassName获得它

function clickUpdate() {
    var updateArray = document.querySelectorAll(".updateButton");

     for(var a=0;a<updateArray.length;a++){ 
     updateArray[a].click(); 
     console.log("this is the array:" + a);
}
console.log("this is the array legnth: " + updateArray.length);
}
clickUpdate(); 

函数单击更新（）{
var updateArray=document.querySelectorAll（“.updateButton”）；
对于（var a=0；aOh好吧，这更有意义，我对这一点还是新手，所以我认为HTML中的数组的工作方式与其他语言中的类似。因此，当您调用“[].slice.call（updateArray）”时这将在一个新数组中复制数组？
HTML中的数组
-没有这样的事情…javascipt中的数组与数组的工作原理相同…HTMLCollection是“类似数组的”但是不是数组
这会在一个新数组中复制数组
-多多少少，是的-看哦，好吧，这更有意义，我对这一点还是新手，所以我认为HTML中的数组的工作方式与其他语言中的类似。所以当您调用“[].slice.call（updateArray）”时这将在新数组中创建数组的副本？
HTML中的数组
-没有这样的事情…javascipt中的数组与数组应该一样工作…HTMLCollection是“类似数组”的，但不是数组
这将在新数组中创建数组的副本
-或多或少，是的-请参阅