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的评论所述，更简单的方法是使用Array.prototype.map

将NodeList传递给Function.prototype.call

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

Answer 2

对于这样一个简单的CSS选择器表达式，我会使用getElementsByClassName并为其指定类名，而不是querySelectorAll。 getElementsByClassName通常比使用querySelectorAll 几个数量级更快。请参阅此jsperf。

var classes = document.getElementsByClassName("klass"); // Do not use a period here!
var values = Array.prototype.map.call(classes, function(el) {
    return el.value;
});

getElementsByClassName通常比querySelectorAll更快。浏览器已按类名索引元素，以优化CSS转换的速度。 getElementsByClassName会返回HTMLCollection元素，因此它没有Array方法，您也需要使用Array.prototype...。

Answer 3

您需要循环遍历元素数组并获取每个元素的值。

var classes = document.querySelectorAll(".klass").value,
    values = [];

for(var i = 0; i < classes.length; i++) {
    values.push(classes[i].value);
}

请注意，这可能不如使用[].map一样干净，但却是good deal faster。

Answer 4

您可以先使用querySelectorAll方法，然后使用数组的map函数检索结果：

var elements = document.querySelectorAll('.klass');
var values = [].map.call(elements, function(e) {
  return e.value;
});

同一类javascript的元素数组

4 个答案: