Question

我正在尝试将NodeList转换为数组。问题是NodeList是一个元素长。

它会正常工作

<form name='moj'>
    <input type='number' value='1' name='pp'>
    <input type='number' value='1' name='pp'>
</form>
<script>
    var Nlist = document.forms['moj']['pp'];
    inputs = Array.prototype.slice.call(Nlist);

    console.log(Nlist);
    console.log(inputs);
</script>

但是这个不会起作用，怎么样？

<form name='moj'>
    <input type='number' value='1' name='pp'>
</form>
<script>
    var Nlist = document.forms['moj']['pp'];
    inputs = Array.prototype.slice.call(Nlist);

    console.log(Nlist);
    console.log(inputs);
</script>

Answer 1

您的代码在第二种情况下不起作用的原因是：如果您有多个具有相同名称的输入（第一种情况），则document.forms['moj']['pp']会返回array。如果你只有一个（第二个场景），它将返回那个元素，而且它不是一个数组，所以你不能对它进行切片。

您可以查看Nlist.length，如果它大于1，您可以拨打slice，否则Nlist已经是您所需要的：

var Nlist = document.forms['moj']['pp'];
if (Nlist.length > 1) {
    inputs = Array.prototype.slice.call(Nlist);
    console.log(Nlist); // RadioNodeList(2) [input, input, value: ""]
    console.log(inputs); // (2) [input, input]
} elseif (Nlist.length === 1) {
    console.log(Nlist); // Your only <input>
    // if you want to normalize inputs so it's always an array,
    // you can do:
    inputs = [ Nlist ];
} else {
    // No input elements returned by that selector
}

Answer 2

document.forms必须包含一个HTMLCollection，您可以在其上使用代码段。但是：

您正在访问pp返回的HTMLCollection的document.forms属性。它包含NodeList或简单输入不是document.forms的责任。

因此，您需要调用某些内容（例如querySelectorAll），以确保在document.forms的内容上返回NodeList：

var Nlist = document.forms['moj'].querySelectorAll('[name=pp]');
inputs = Array.prototype.slice.call(Nlist);

console.log(Nlist);
console.log(inputs);

将NodeList与一个元素转换为数组

2 个答案: