javascript - How do I convert a HTMLCollection into an array, without emptying it? - Stack Overflow

I am trying to convert an HTMLCollection of 4 divs into an array, but every method I try seems to result in the array being emptied.

<div class="container">
        <div class="shape" id="one"></div>
        <div class="shape" id="two"></div>
        <div class="shape" id="three"></div>
        <div class="shape" id="four"></div>
</div>

Methods I've attempted - as per this previous question:

var shapesHC = document.getElementsByClassName('shape');
//gives HTMLCollection

var shapesArrCall = [].slice.call(shapesHC);
// returns empty array

var shapesArrHC = Array.from(shapesHC);
// returns empty array

var shapesArrHCSpread = [...shapesHC];
// returns empty array

I'd really appreciate if anyone can point out where I'm going wrong here.

Thanks.

I am trying to convert an HTMLCollection of 4 divs into an array, but every method I try seems to result in the array being emptied.

<div class="container">
        <div class="shape" id="one"></div>
        <div class="shape" id="two"></div>
        <div class="shape" id="three"></div>
        <div class="shape" id="four"></div>
</div>

Methods I've attempted - as per this previous question:

var shapesHC = document.getElementsByClassName('shape');
//gives HTMLCollection

var shapesArrCall = [].slice.call(shapesHC);
// returns empty array

var shapesArrHC = Array.from(shapesHC);
// returns empty array

var shapesArrHCSpread = [...shapesHC];
// returns empty array

I'd really appreciate if anyone can point out where I'm going wrong here.

Thanks.

• javascript
• html
• arrays
• dom

Share Improve this question Follow edited Jan 8, 2018 at 16:24 zero298 27k1010 gold badges8080 silver badges107107 bronze badges asked Jan 8, 2018 at 16:07 Paulo_devPaulo_dev 8111 silver badge77 bronze badges 5

• 1 All three of those methods return a non-empty array when I tested it. Perhaps your problem is somewhere else in your code? – Khauri Commented Jan 8, 2018 at 16:11
• Thanks for quick response - this is the entirety of my code. It's just one html file and a js file. – Paulo_dev Commented Jan 8, 2018 at 16:16
• 2 Where is the JavaScript in your code located, above or below your HTML? If it is above your HTML (in the head), those elements don't exist to be queried until after your JavaScript has run. – zero298 Commented Jan 8, 2018 at 16:19
• Read this question and see if it applies: stackoverflow./a/24070373/691711 – zero298 Commented Jan 8, 2018 at 16:22
• 1 Yep, my script tag was in the head. Now that I've moved it to the end of the body it works fine. Facepalm – Paulo_dev Commented Jan 8, 2018 at 16:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Try using this:

setTimeout(() => {
    this.convertToArray();
});

convertToArray() {
    const shapesHC = document.getElementsByClassName('shape');
    const shapesArrHCSpread = [...(shapesHC as any)];
    console.log(shapesArrHCSpread);
}