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

我同意@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>

Answer 2

尝试

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

我认为这是因为当您更改字段名称时，document::getElementsByName是一个"神奇"列表(请参阅此问题)，如果您更改其名称，它将从您正在迭代的列表中删除。