<p>What could be the problem with reversing the array of DOM objects as in the following code:</p>

<pre><code>var imagesArr = new Array();
imagesArr = document.getElementById("myDivHolderId").getElementsByTagName("img");
imagesArr.reverse();
</code></pre>

<p>In Firefox 3, when I call the <code>reverse()</code> method the script stops executing and shows the following error in the console of the Web Developer Toolbar:</p>

<pre class="lang-none prettyprint-override"><code>imagesArr.reverse is not a function
</code></pre>

<p>The <code>imagesArr</code> variable can be iterated through with a for loop and elements like <code>imagesArr[i]</code> can be accessed, so why is it not seen as an array when calling the <code>reverse()</code> method?</p>

[{'answer_id': 45622, 'author': 'DevelopingChris', 'author_id': 1220, 'author_profile': 'https://Stackoverflow.com/users/1220', 'pm_score': 1, 'selected': False, 'text': '<p>Your first line is irrelevant, since it doesn\'t coerce the assignment to the variable, javascript works the other way. imagesArr, is not of Type Array(), its of whatever the return type of getElementsByTagName("img") is. In this case, its an HtmlCollection in Firefox 3.</p>\n\n<p>The only methods on this object, are the indexers, and length. In order to work in reverse, just iterate backwards.</p>\n'}, {'answer_id': 45625, 'author': 'Adam Wright', 'author_id': 1200, 'author_profile': 'https://Stackoverflow.com/users/1200', 'pm_score': 5, 'selected': True, 'text': '<p>Because getElementsByTag name actually returns a NodeList structure. It has similar array like indexing properties for syntactic convenience, but it is <em>not</em> an array. For example, the set of entries is actually constantly being dynamically updated - if you add a new img tag under myDivHolderId, it will automatically appear in imagesArr.</p>\n\n<p>See <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177" rel="noreferrer">http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177</a> for more.</p>\n'}, {'answer_id': 45740, 'author': 'Vincent Robert', 'author_id': 268, 'author_profile': 'https://Stackoverflow.com/users/268', 'pm_score': 3, 'selected': False, 'text': '<p><code>getElementsByTag()</code> returns a NodeList instead of an Array. You can convert a NodeList to an Array but note that the array will be another object, so reversing it will not affect the DOM nodes position.</p>\n\n<pre><code>var listNodes = document.getElementById("myDivHolderId").getElementsByTagName("img");\nvar arrayNodes = Array.slice.call(listNodes, 0);\narrayNodes.reverse();\n</code></pre>\n\n<p>In order to change the position, you will have to remove the DOM nodes and add them all again at the right position.</p>\n\n<p><code>Array.prototype.slice.call(arrayLike, 0)</code> is a great way to convert an array-like to an array, but if you are using a JavaScript library, it may actually provide a even better/faster way to do it. For example, jQuery has <code>$.makeArray(arrayLike)</code>.</p>\n\n<p>You can also use the Array methods directly on the NodeList:</p>\n\n<pre><code>Array.prototype.reverse.call(listNodes);\n</code></pre>\n'}, {'answer_id': 28211790, 'author': 'iProDev', 'author_id': 4506730, 'author_profile': 'https://Stackoverflow.com/users/4506730', 'pm_score': 3, 'selected': False, 'text': '<p><code>getElementsByTag()</code> returns a NodeList instead of an Array. You need to convert the NodeList to an array then reverse it.</p>\n\n<pre><code>var imagesArr = [].slice.call(document.getElementById("myDivHolderId").getElementsByTagName("img"), 0).reverse();\n</code></pre>\n'}, {'answer_id': 29168307, 'author': 'Mr. X', 'author_id': 4388578, 'author_profile': 'https://Stackoverflow.com/users/4388578', 'pm_score': 2, 'selected': False, 'text': "<p>I know this question is old but I think it needs a bit of clarification as some of the answers here are outdated as W3C changed the definition, and consequently the return value of these methods <code>getElementsByTagName()</code> and <code>getElementsByClassName()</code></p>\n\n<p>These methods <strong>as of the time of writing this answer</strong> return an object - empty or not - of type <code>HTMLCollection</code> and <strong>not</strong> <code>NodeList</code>.</p>\n\n<p>It's like the difference between the properties <code>children</code> which returns an object of type <code>HTMLCollection</code> since it's only composed of elements and excluding text or comment nodes, and <code>childNodes</code> which returns an object of type <code>NodeList</code> since it could contain other node types like text and comments as well. </p>\n\n<p>Note: I'd go on tangent here and express my lack of insight on why <code>querySelectorAll()</code> method currently returns a <code>NodeList</code> and not an <code>HTMLCollection</code> since it exclusively works on  element nodes in the document and nothing else. </p>\n\n<p>Probably it has something to do with potential coverage of other node types in the future and they went for a more future proof solution, who knows really? :)</p>\n\n<p>EDIT: I think I got the rationale behind this decision to opt for a <code>NodeList</code> and not an <code>HTMLCollection</code> for the <code>querySelectorAll()</code>. </p>\n\n<p>Since they constructed <code>HTMLCollection</code> to be exclusively and entirely live and since this method doesn't need this live functionality, they decided for a <code>NodeList</code> implementation instead to best serve its purpose economically and efficiently. </p>\n"}, {'answer_id': 68064201, 'author': 'Muhammad Fahim', 'author_id': 12581164, 'author_profile': 'https://Stackoverflow.com/users/12581164', 'pm_score': 3, 'selected': False, 'text': '<p>this problem can Actually be solved easily with array spread operator.</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>let elements = document.querySelectorAll(\'button\');\nelements = [...elements];\nconsole.log(elements) // Before reverse\nelements = elements.reverse();  // Now the reverse function will work\nconsole.log(elements)  // After reverse</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;\n&lt;body&gt;\n&lt;button&gt;button1&lt;/button&gt;\n&lt;button&gt;button2&lt;/button&gt;\n&lt;button&gt;button3&lt;/button&gt;\n&lt;button&gt;button4&lt;/button&gt;\n&lt;button&gt;button5&lt;/button&gt;\n&lt;/body&gt;\n&lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 73631405, 'author': 'Baz Love', 'author_id': 2845079, 'author_profile': 'https://Stackoverflow.com/users/2845079', 'pm_score': 0, 'selected': False, 'text': "<p>This worked for me, I did a reverse for loop and allocated the nodes to an array</p>\n<pre><code>var Slides = document.getElementById(&quot;slideshow&quot;).querySelectorAll('li');\nvar TempArr = [];\nfor (var x = Slides.length; x--;) {\n    TempArr.push(Slides[x]);\n}\nSlides = TempArr;\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/45613', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4723/']