I'm trying to figure out how to convert a javascript collection (i.e. something returned from getElementsByTagName/etc) to a normal array so I can perform array functions on the data.
I'm looking for a solution without using any libraries and haven't been able to find any sort of elegant solutions anywhere online. Has anyone written a good util function for this problem?
You can do this:
var coll = document.getElementsByTagName('div');
var arr = Array.prototype.slice.call( coll, 0 );
EDIT: As @Chris Nielsen noted, this fails in IE pre-9. Best would be to do some feature testing, and create a function that can handle either, or just do a loop as in the (second) solution from @brilliand.
[].slice.call(document.getElementsByTagName('div'), 0);
.slice(), especially if I'm going to use this more than once. Though I'd consider your shorter version as a way to create a reusable reference. var slice = [].slice; /*...*/ slice.call( coll, 0 );
This has become a lot simpler in modern browsers. I'll outline two approaches, both supported by all major browsers (Chrome, Edge, Safari, Firefox, Opera) since 2016.
"Spread syntax allows an iterable (...) to be expanded"
const divs = document.getElementsByTagName('div');
const myArray = [...divs]; // [div, div, ...]
Array.from "creates a new Array instance from an array-like or iterable object"
Example: Convert an HTML collection to array
const divs = document.getElementsByTagName('div');
const myArray = Array.from(divs); // [div, div, ...]
Copy it to a regular array?
var coll = document.getElementsByTagName('div');
var arr = [];
for(var i in coll) arr[i] = coll[i];
Been a while since I used JavaScript... you may need this instead:
var coll = document.getElementsByTagName('div');
var arr = [];
for(var i = 0; i < coll.length; i++) arr.push(coll[i]);
You can use spread operator:
var coll = document.getElementsByTagName('div');
var arr = [...coll];
You can use Array.from as it creates a new, shallow-copied Array instance from an iterable. So An HTMLCollection is a collection of document elements.
So we can use Array.from to convert to an array them using for each to iterate over its elements of the array.
let coll = document.getElementsByTagName('div');
let ary= Array.from(col1);
Array.from(col1).forEach((elm=>elm.innextText='Example'));
