Javascript：为什么 FOR 循环会跳过所有其他匹配项？

Question

我目前从我的 .getElementsByName() 查询中得到 5 个结果，并且在抛出一个简单的 alert() 时循环遍历它们按预期进行，但是一旦我尝试为这些结果设置新名称结果，它跳过了我的第二和第四场比赛。

来源：

<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 );
    }
}

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

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

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

它只会重命名每隔一个 (0,2,4)。

我错过了什么？

Answer 1

尝试

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

我认为这是因为当您更改字段名称时，document::getElementsByName 是一个 "magical" 列表（参见），它会从您迭代的列表中删除如果您更改其名称，则通过。

Answer 2

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

window.onload = function() {
    var fields = document.querySelectorAll("[name='target']");
    for (var i = 0; i < fields.length; i++) {
         fields[i].name = 'target[]';
    }
}

<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>

Javascript：为什么 FOR 循环会跳过所有其他匹配项？

Javascript: Why is FOR loop skipping every other match?

javascript

getelementsbyname