同一类javascript的元素数组

时间:2014-12-31 11:29:31

标签: javascript html arrays html5 dom

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

当我这样做时,我只得到第一个元素,但我需要一个完整的数组:

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" />

这可能吗?

4 个答案:

答案 0 :(得分:2)

使用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;
});

答案 1 :(得分:1)

对于这样一个简单的CSS选择器表达式,我会使用getElementsByClassName并为其指定类名,而不是querySelectorAllgetElementsByClassName通常比使用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...

答案 2 :(得分:0)

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

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

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

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

答案 3 :(得分:0)

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

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