同一类的元素数组javascript

-4

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

当我做这个，我只得到了第一个元素，但我想整个数组：

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

这可能吗？

来源

2014-12-31 Maroxtn

'var elements = document.getElementsByClassName（“klass”）;'？ – BatScream

...或使用'document.querySelectorAll（）'代替。 – Teemu

认真的家伙为什么投票下来querySelector是一种方法来使用JavaScript的CSS选择器？ – Maroxtn

你需要遍历你的元素数组，并获得每个元素的值。

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

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

注意，这可能不会像使用[].map干净，但它是一个good deal faster。

来源

2014-12-31 11:32:48 Hydrothermal

为什么你将类数组推入另一个类或它只是一个健全的检查，一切都很好？ – Maroxtn

你可以写同一个数组（即'classes [i] = classes [i] .value'），但我更愿意避免这样做，因为潜在的问题/不一致。不过，它会给你基本上相同的结果。 – Hydrothermal

使用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在注释中指出，较短的方式做到这一点是使用Function.prototype.call

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

来源

2014-12-31 11:34:13 axelduch

你甚至可以使用'[] .map.call（nodeList，func）'。 ;） – Ginden

Yus它更短的ineed :) – axelduch

你可以请简化该函数如何返回形式数组或每个自变量中的大多数这个类和方法对我来说是新的 – Maroxtn

您可以使用节点列表传递给Array.prototype.map首先使用querySelectorAll方法，然后使用数组的map函数N到检索结果：

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

来源

2014-12-31 11:35:57 udalmik

对于这样一个简单的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...。

来源

2014-12-31 11:48:47 Louis

同一类的元素数组javascript

回答

相关问题