var realArray = Array.prototype.slice.call(document.getElementsByClassName('classname'), 0);
Or, if you want to get cute about it (which i always do)
var realArray = [].slice.call(document.getElementsByClassName('classname'), 0);
The class selectors for javascript’s dom api – getElementsByClass and getElementsByClassName – don’t return arrays but rather pseudo-arrays called HTMLCollections. This came as a surprise to me after I started switching from using jquery to using pure js.
An HTMLCollection has some methods associated with it, and you can still grab a handler to your desired element via index, i.e. you can
var myElement = document.getElementsByClassName('classname')[1];
but there are lots of super handy array methods you might wanna access. i use ‘forEach’ a fair bit so i always convert my HTMLCollections to a true array.
note: IE pre-9 doesn’t support forEach. but you can manually add the method to the array constructor:</p>
// from stackoverflow user Kishor Subedi:
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fn, scope) {
for(var i = 0, len = this.length; i < len; ++i) {
fn.call(scope, this[i], i, this);
}
}
}