Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is HTMLCollection An Array?

I understand that HTMLCollection is not actually an array, or else it would be defined as an array. I use a help function that I call isArray() to detect whether or not an object is an array. I use this little helper all over the place and i've been running problems on this returning false when checking against an htmlCollection.

var isArray: function(obj) {
    var type = Function.prototype.call.bind( Object.prototype.toString );
    return type(obj) === '[object Array]' || type(obj) === '[object HTMLCollection]';
}

Would it be wrong to check for the htmlCollection type within this helper function and assume that it is the same thing as an array? What makes it any different? Other than its html elements as opposed to javascript objects.

like image 709
ryandlf Avatar asked Oct 07 '12 15:10

ryandlf


People also ask

How do I convert HTMLCollection to array?

One way to convert an HTMLCollection to a JavaScript array is to use the slice method. We get divs by call querySelector to select all the divs in the HTML. We just call slice with divs and it'll return the div element objects in an array. We call slice on an empty array and pass in the divs HTML.

What is object HTMLCollection in JavaScript?

An HTMLCollection object is an array-like list (collection) of HTML elements.

Can we use forEach with HTMLCollection?

The Array. from() method is used to create a new Array from an array-like or iterable object. The HTMLCollection is passed to this method to convert it into an Array. The forEach() method can now be used to iterate over the elements like an array and display them.


2 Answers

No, it's an HTMLCollection, not an Array.

It has Array-like characteristics, like numeric properties, and a .length property, but it does not inherit from Array.prototype. Therefore it does not have the standard Array methods, and so should be seen as being different.

Another significant difference is that HTMLCollection is a "live" collection, which means that it updates as the DOM updates. If you remove one of its nodes from the DOM, it will be removed from the HTMLCollection automatically.

like image 194
I Hate Lazy Avatar answered Oct 01 '22 20:10

I Hate Lazy


If you are considering an Array conversion, please refer to this post:

Most efficient way to convert an HTMLCollection to an Array.

They discussed some methods, and the solution in the selected answer also worked in a situation I´ve experienced.

like image 31
rdonatoiop Avatar answered Oct 01 '22 21:10

rdonatoiop