javascript - 同一类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 (see also the section "How can I convert NodeList to Array?")然后将其转换为数组和 map返回每个元素值的函数。

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

更新

---

如 Ginden 的评论所述, 一个较短的方法是将 NodeList 传递给 Array.prototype.map使用 Function.prototype.call

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