How get an array of the values of elements which have same class?
When I do this I get only the first element, but I want a whole array:
var classes = document.querySelector(".klass").value;
alert(classes); //Outputs only the first element
And I want to get a full array of the values of the inputs:
<input type="text" class="klass" />
<input type="text" class="klass" />
<input type="text" class="klass" />
Is that possible?
Use document.querySelectorAll to retrieve a NodeList (see also the section "How can I convert NodeList to Array?") then cast it to an array and map a function that returns each element's value.
var classesNodeList = document.querySelectorAll(".klass");
var classes = Array.prototype.slice.call(classesNodeList).map(function(element) {
return element.value;
});
Update
As stated in the comment by Ginden, a shorter way to do this is to pass the NodeList to Array.prototype.map using Function.prototype.call
var classesNodeList = document.querySelectorAll(".klass");
var classes = Array.prototype.map.call(classesNodeList, function(element) {
return element.value;
});
[].map.call(nodeList, func). ;)
Object.setPrototypeOf(NodeList.prototype, Array.prototype); or NodeList.prototype.__proto__ = Array.prototype; to have all array methodsFor such a simple CSS selector expression, I would use getElementsByClassName and give it the class name, rather than querySelectorAll. getElementsByClassName is generally faster than using querySelectorAll by several orders of magnitude. See this 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 is usually faster than querySelectorAll. Browsers index elements by class name already to optimize the speed of CSS transformations. getElementsByClassName returns an HTMLCollection element, so it does not have the Array methods and you need to use Array.prototype... on this too.
You need to loop through your array of elements and get the value of each one.
var classes = document.querySelectorAll(".klass").value,
values = [];
for(var i = 0; i < classes.length; i++) {
values.push(classes[i].value);
}
Note that this may not be as clean as using [].map, but is a good deal faster.
classes[i] = classes[i].value), but I prefer to avoid doing that because of potential issues/inconsistencies. It will give you essentially the same result, though.You can use querySelectorAll method first and then use array's map function to retrieve the result:
var elements = document.querySelectorAll('.klass');
var values = [].map.call(elements, function(e) {
return e.value;
});
var elements = document.getElementsByClassName("klass");?document.querySelectorAll()instead.querySelector). SO is not a crowd-sourced API documentation service.