Javascript: reverse an array of document.getElementByClassName

Question

i have this variable that is:

var stars = this.parentNode.children

and its value is:

[span.rate, span.rate, span.rate.rated, span.rate.rated, span.rate.rated]

Now i want to reverse it, but if i try:

stars.reverse()

I obtain

Uncaught TypeError: stars.reverse is not a functionupdateRateStar @ app.js:75(anonymous function) @ app.js:98

I cannot understand why it works with an array like:

[1,2,3]

So if i try:

[1,2,3].reverse()

it works. Thus i cannot understand the problem

Answer 1

You can't call Array.prototype.reverse on NodeListCollection. Instead, you should use:

var stars = [].slice.call(stars, 0).reverse()

Answer 2

Use

var revArray = Array.prototype.slice.apply( a ).reverse()

The reason is that you have a NodeList and not an Array there. Both behave similarly in many cases, but the NodeList does not have the array methods.

With the

Array.prototype.slice.apply( a )

part, we convert the NodeList to an array, which can than be reversed.