Javascript：为什么FOR循环每隔一次就跳过一次？

目前，我从

.getElementsByName（）

查询中获得了5个结果，当抛出一个简单的

警报（）

时，它们会按预期进行循环，但一旦我尝试为这些结果设置新名称，它就会跳过我的第二个和第四个匹配项

来源：

<form>
    <input type="text" />
    <input type="checkbox" name="target" value=1 />
    <input type="checkbox" name="target" value=2 />
    <input type="checkbox" name="target" value=3 />
    <input type="checkbox" name="target" value=4 />
    <input type="checkbox" name="target" value=5 />
    <input type="text" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
</form>

当我尝试时：

window.onload = function() {
    var fields = document.getElementsByName("target");

    for (var i = 0; i < fields.length; i++) {
        alert( fields[i].value );
    }
}

window.onload=function（）{
var fields=document.getElementsByName（“目标”）；
对于（变量i=0；i

它会对所有五个值发出警报

但是，当我尝试这样做时：

for (var i = 0; i < fields.length; i++) {
    fields[i].name = 'target[]';
}

for（变量i=0；i

它仅每隔一个重命名一次（0,2,4）

我错过了什么？

试试看

for (var i = fields.length - 1; i >= 0; i--) {
    fields[i].name = 'target[]';
}

---

我认为这是因为当您更改字段名称时，

document:：getElementsByName

是一个“神奇”列表（请参阅），如果您更改其名称，它将从您正在迭代的列表中删除。

关于原因，我同意@Isaac的观点-但如果您更改为QuerySelector，我有一个替代解决方案，如下所示-它将适用于所有复选框并应用更改后的名称[]

window.onload=function（）{
var fields=document.queryselectoral（“[name='target']”）；
对于（变量i=0；i

如果有更简洁/优雅的方法来重命名目标元素，请随意分享。每次都会检索到它们，因为第二次使用该名称的第二个元素将是原来的第三个元素。

getElementsByName

是一个实时列表，更改名称会将其从列表中删除使用

document.querySelectorAll（）

，该列表根据返回静态

NodeList

，而不是由

document.getElementsByName（）

返回的活动节点列表。啊，活动列表！非常感谢！！