如何获取具有相同类的元素值的数组?
当我这样做时,我只得到第一个元素,但我需要一个完整的数组:
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" />
这可能吗?
答案 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
Function.prototype.call
var classesNodeList = document.querySelectorAll(".klass");
var classes = Array.prototype.map.call(classesNodeList, function(element) {
return element.value;
});
答案 1 :(得分:1)
对于这样一个简单的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...
。
答案 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;
});