DOM: Array vs NodeList vs HTMLCollection

What Does getElementsByClassName Return?

As of 2013-04-26, {Firefox, Internet Explorer} return HTMLCollection. {Chrome, Safari, Opera} return NodeList. Older versions of Firefox returns NodeList.

[see DOM: Get Elements by ID, Tag, Name, Class, CSS Selector]

What is the Difference Between Array, NodeList, HTMLCollection?

• NodeList is a collection of nodes. HTMLCollection is a collection of HTM/XML elements. NodeList is a more general container. For example, the text content of a <p> tag is a node, but isn't HTML element.

• HTMLCollection has method namedItem, which is not in NodeList. (Opera browser adds the method to its NodeList object.)

• NodeList and HTMLCollection are array-like objects. Meaning, they have “length” property, and have properties named 0, 1, 2, …, n, so that you can access its elements like a array. [see JS: Array-Like Object]

• NodeList and HTMLCollection are not inherited from Array object. To use array methods on them, you have to call the method in a special way, like this:

Array.prototype.map.call(array-like_object, function)

[see JS: Array-Like Object to Array]

[see JS: Array.prototype]

• NodeList and HTMLCollection are NOT ALWAYS live objects. For example: document.querySelectorAll(css_selector) return a non-live object. [see DOM: Get Elements by ID, Tag, Name, Class, CSS Selector]

• There's no builtin way to find out whether NodeList or HTMLCollection is live object.

• When working with live objects, you must be careful, not to insert or remove element within a loop. [see DOM: What Does Live Object Mean?]

You should NOT use for (var x in object) {…}, because that loops thru all enumerable properties and goes into prototype chain. [see JS: Access Property, List Properties]

The most supported and safe and fast way to loop thru array-like object is a normal loop, like this: for (var i = 0; i < myNodeList.length; ++i) {… myNodeList[i] …}.

How to Convert Array-Like Object to Array?

See: JS: Array-Like Object to Array

Even Browsers and W3C Are Confused!

Here's what Mozilla says:

Note: While the W3C DOM 3 Core specification says elements is a NodeList that was simply because of a an attempt to have the “core” specification not depend on the “html” specification at that time. The DOM 4 draft says that elements is an HTMLCollection.

Gecko/Firefox currently returns a NodeList (Bug 162927) but starting with Gecko/Firefox 19, this method will return HTMLCollection (Bug 799464). Internet Explorer returns a HTMLCollection. WebKit returns a NodeList. Opera also returns a NodeList, but with a namedItem method implemented, which makes it similar to a HTMLCollection.

2013-04-26, from https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName

Here's WHATWG says as of 2016-07-02:

Elements is the better solution for representing a collection of elements. HTMLCollection is an historical artifact we cannot rid the web of.

However, as of today (2016-07-02), latest Google Chrome and Firefox returns HTMLCollection.

You can find out the type by:

Object.prototype.toString.call(document.getElementsByClassName("xyz"))

Reference

DOM Standard#old-style-collections