同一类javascript的元素数组

Question

如何获取具有相同类的元素值的数组？

当我这样做时，我只得到第一个元素，但我想要一个完整的数组：

var classes = document.querySelector(".klass").value;
alert(classes); //Outputs only the first element

我想获得输入值的完整数组：

<input type="text" class="klass" />
<input type="text" class="klass" />
<input type="text" class="klass" />

那可能吗？

Answer 1

使用document.querySelectorAll检索NodeList（参阅下面的“我怎样才能转换节点列表，以阵列？”），然后将其转换为一个数组，映射一个函数，返回每个元素的值。

var classesNodeList = document.querySelectorAll(".klass");
var classes = Array.prototype.slice.call(classesNodeList).map(function(element) {
    return element.value;
});

更新

正如Ginden的评论中所述，一种更短的方法是将 NodeList 传递给Array.prototype.mapusingFunction.prototype.call

var classesNodeList = document.querySelectorAll(".klass");
var classes = Array.prototype.map.call(classesNodeList, function(element) {
    return element.value;
});