JS: Array vs NodeList vs HTMLCollection
What Does getElementsByClassName Return?
As of , {Firefox, Internet Explorer} return HTMLCollection. {Chrome, Safari, Opera} return NodeList. Older versions of Firefox returns NodeList.
〔►see JS: 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) returns a non-live object.
〔►see JS: 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 JS: 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.
, 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 (), 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