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）。因此，在命名属性修改后，它将包含少于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[]";
}

使用getElementsByName获得多个元素，更改其名称会得到奇怪的结果

1 个答案: