javascript - 使用 getElementsByName 获取多个元素，更改它们的名称会得到奇怪的结果

Question

我有一个表单，其中包含多个同名的输入(文本)元素

<input name="val[]" type="text" />
<input name="val[]" type="text" />
<input name="val[]" type="text" />

现在，假设我想将它们的名称更改为“val2[]”。

这是我最初写的:

var vals=document.getElementsByName("val[]");
var valct=vals.length;
    for( var i=0; i<valct; i++ )
        vals[i].name="val2[]";

但是这似乎给我带来了错误。
Chrome 的开发者工具显示“无法设置未定义的属性‘名称’”

思考了一段时间，我认为重命名后该元素可能会被删除。
因此，我将代码的最后一行更改为:

vals[ 0 ].name="val2[]";

这有效!

但是后来，我在想是否可以这样编码:

while( vals=document.getElementsByName("val[]") )
    vals[0].name="val2[]";

这给了我与上面“无法设置未定义的属性'名称'”相同的错误
我很困惑。我也用Firefox测试了，结果是一样的。 (无法在IE上测试，因为我在页面上使用了HTML5原生DnD)

在我看来， getElementsByName 返回的是一个队列，而更改名称则相当于从队列中删除项目。
这是真的？或者对此的正确解释是什么？

Answer 1

发生这种情况是因为您更改了属性，您将其用作 document.getElementsByName 的选择器，并且它返回 NodeList 对象给您，而不是 Array. NodeList 它是 DOM 元素的实时集合 ( ref )。因此，在您修改 name 属性后，它将包含少于 3 个元素 ( demostration )。

尝试像下面的示例那样修改代码，这将解决您的问题，因为您将得到一个静态 Array 而不是 NodeList ( jsfiddle )。

var vals = [].slice.call(document.getElementsByName("val[]"));
var valct = vals.length;
for( var i=0; i<valct; ++i ) {
    vals[i].name="val2[]";
}