Массив элемента того же класса 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

Вам нужно пройти через массив элементов и получить значение каждого из них.

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

Update

---

Как указано в комментарии по 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; 
}); 

Answer 3

Вы можете использовать querySelectorAll метод сначала, а затем использовать массив map functio п для получения результата:

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

Answer 4

Для такого простого выражения селектора 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....