JavaScript querySelectorAll 获取多个输入框的多个值

Question

我正在制作一个网站，想要使用多个输入框。

<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
...

<button onclick="function()">Send</button>

在JavaScript中，我正在使用querySelectorAll来获取数组中的值。

function function() {
   document.querySelectorAll('.foo').value;
}

这只有在我不使用一个值时才有效，但这样我得到的是整个元素而不是值。 谢谢 :)

- merlijn merlin berg

---

document.querySelectorAll('.foo') 将返回 nodeList。所以 document.querySelectorAll('.foo').value 是未定义的。 - Sankar

function 是 JavaScript 中的保留关键字。 - Ataur Rahman Munna

@SankarRaj 它返回的是一个 _NodeList_，而不是一个真正的数组。 - Alnitak

@Alnitak 谢谢你的信息。 - Sankar

@Quentin，重复问题中的任何答案都没有特别涉及qSA及其返回的“NodeList”。 - Alnitak

@Alnitak — 上下文表明，问题中提到的所有方法都以相同的方式工作。 - Quentin

Answer 1

document.querySelectorAll() 返回的是（非实时）NodeList，而不是数组。但幸运的是，我们可以在伪数组上使用call调用数组方法：

function getValues(selector) {
    var els = document.querySelectorAll(selector);
    return [].map.call(els, el => el.value);
}

- Alnitak

Answer 2

document.querySelectorAll('.foo')将返回节点列表。因此，您的代码将返回undefined。

其中一种方法是获取值数组。

function func() {
  var a = document.querySelectorAll('.foo');
  var b = [];
  for(var i = 0; i <= a.length-1; i++){
    b.push(a[i].value);
  }
  console.log(b);
}

<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">

<button onclick="func()">Send</button>

- Sankar

---

.forEach 结合 push 是一个经典的反模式（尽管 NodeList 接口提供了 .forEach，但不直接支持 .map）。 - Alnitak

@Alnitak，能否请您解释一下？抱歉，我不明白。 - Sankar

将一个数组中的每个元素通过一个可变函数传递，并返回结果的新数组的规范方法是使用 Array.prototype.map。 - Alnitak

@Alnitak 我知道了。谢谢。 - Sankar

@KadenSkinner，你想要检查两个数组是否相等，所以这可能有帮助 - JSON.stringify(b)==JSON.stringify(["", "foo", "foo"]); - Sankar

Answer 3

您需要逐个访问这些值。以下是更新后的示例代码：

function myfunc() {
   var myElementArray = document.querySelectorAll('.foo');

     var myOutputText = "";
     for(var i=0;i< myElementArray.length; i++){
            myOutputText += myElementArray[i].value + " | ";
    }

    alert(myOutputText);
}

这里是JSFiddle演示

- Ahs N

Answer 4

使用ES6，获取值数组可以尝试这样做

Array.from(document.querySelectorAll('.foo')).map(x => x.value)

- Tai Dinh

---

我在我的答案中考虑过这样做，但这会不必要地创建一个全新的数组，只是为了再次将其丢弃。使用[].map.call可以避免这一步骤。 - Alnitak