Array.prototype.splice.call - not working with a querySelectorAll('.className')

Question

I have three divs with a class name of .column , on the bottom, before my body tag I have a small script which is supposed to get these divs and put them into an array so that I can work on them. I've done this before so I don't know what may be causing this problem this time.

var columns = Array.prototype.splice.call(document.querySelectorAll('.column'));
document.write("Size: " + columns.length);

The above code particularly Array.prototype.splice.call(document.querySelectorAll('.column')); is supposed to turn the node list returned by querySelectorAll into a workable array. However, whenever I write the length of var columns it always returns 0, this can't be possible since I have three divs with that class. Now, when I do:

var columnsNodes = document.querySelectorAll('.column'); document.write(columnsNodes.length);

And I write it to the document it returns 3, which is correct. This is leading me to believe that something about converting the node list to an array is not working, which is odd because I've done it before on multiple occasions. Does anyone have any idea what could be causing this?

Stuff I've done:

• checked spelling multiple times
• inserted parent div before call eg: ('.parentDiv .column');
• deleted the id's associated with .column

Nothing has worked, please give me your input.

Answer 1

The splice() method adds/removes items to/from an array, and returns the removed item(s).

Note: This method changes the original array.

http://www.w3schools.com/jsref/jsref_splice.asp

You should use slice() instead so it won't try to write a NodeList (which is ofc. not possible).