JS .children Returns an Object, Want an Array (ES6) [duplicate]

Question

According its w3schools page (everyone's favorite resource, I know), the .children property returns

A live HTMLCollection object, representing a collection of element nodes

This object can be looped over as if it were an array like so:

var elements = document.getElementById('test').children;

for (var i=0; i < elements.length; i++) {
  console.log(elements[i]);
}

<div id="test">
  <p>paragraph 1</p>
  
  <p>paragraph 2</p>
  
  <p>paragraph 3</p>
</div>

However attempting to use the .map function throws an error:

var elements = document.getElementById('test').children;

var x = elements.map((element, index) => {
  console.log(element);
});

<div id="test">
  <p>paragraph 1</p>

  <p>paragraph 2</p>

  <p>paragraph 3</p>
</div>

Is there a better way to get an array of child DOM elements, or do I have to loop through the object and manually create an array in order to use array methods like .map()? Note, I do not want to use jQuery. Thanks in advance.

Array.from(elements) P.S. Please oh please don't use w3schools as your reference! — Patrick Roberts
– Patrick Roberts, Commented Jun 14, 2016 at 20:38
Thanks @PatrickRoberts and believe me I have the same issues with w3schools as everyone else, however every other search result for .children discusses the jQuery method. — dougmacklin
– dougmacklin, Commented Jun 14, 2016 at 20:50
@putvande I need to convert the contents of a <div> to a JSON array — dougmacklin
– dougmacklin, Commented Jun 14, 2016 at 20:52
Cool, I was basing my searches around trying to find more information about .children, sorry for not searching htmlcollection. That question is 8 years old, however, and doesn't contain the ES6 solution that @SterlingArcher proposed, which I am going to use. Thanks for your help Patrick. — dougmacklin
– dougmacklin, Commented Jun 14, 2016 at 21:01

Sterling Archer · Accepted Answer · 2016-06-14 20:44:14Z

26

.map expects an array. You need to convert this array-like object (HTMLCollection) into a real array. There are several methods, but my 2 favorite are ES6 spread, and array from.

Array.from(document.getElementById('test').children).map

Or spreading

[...document.getElementById('test').children].map

If you don't want to use ES6, you can slice and force an array conversion, or [].slice.call(document.getElementById('test').children) I believe would also do a conversion.

As Patrick said in the comments: [].slice.call, not [].call. Might also want to mention the more wordy Array.prototype.slice.call since it doesn't initialize an unused empty array

The key here is that an HTMLCollection is an object, where map is an Array function.

edited Jun 14, 2016 at 20:44

answered Jun 14, 2016 at 20:40

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sterling Archer Over a year ago

Whoops, good catch!

dougmacklin Over a year ago

Thanks for your help @SterlingArcher! I understand that it's not an array and that it needs to be converted. Do you know if there a difference in efficiency between Array.from() and the spread method? I am fine using ES6.

ashwell Over a year ago

You could also use call on the map directly Array.prototype.map.call( element.children, mappingFunction)

Collectives™ on Stack Overflow

JS .children Returns an Object, Want an Array (ES6) [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related