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 返回的是一个队列，而更改名称则相当于从中删除项目。
这是真的？或者对此的正确解释是什么？

score 3 · Accepted Answer

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

尝试像下面的示例一样修改您的代码，这将解决您的问题，因为您将获得静态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[]";
}

1 回答 1