如何在不清空 HTMLCollection 的情况下将其转换为数组？答案

【问题标题】：How do I convert a HTMLCollection into an array, without emptying it?如何在不清空 HTMLCollection 的情况下将其转换为数组？
【发布时间】：2018-06-17 15:34:05
【问题描述】：

我正在尝试将 4 个 div 的 HTMLCollection 转换为一个数组，但我尝试的每个方法似乎都会导致数组被清空。

<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>

我尝试过的方法 - 根据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

如果有人能指出我在哪里出错，我将不胜感激。

谢谢。

【问题讨论】：

这三个方法在我测试时都返回一个非空数组。也许您的问题出在代码的其他地方？
感谢您的快速响应 - 这是我的全部代码。就是一个html文件和一个js文件。
代码中的 JavaScript 位于 HTML 的上方还是下方？如果它在您的 HTML 之上（在头部），则这些元素在您的 JavaScript 运行之后之前不存在以供查询。
阅读这个问题，看看它是否适用：stackoverflow.com/a/24070373/691711
是的，我的脚本标签在头部。现在我已经把它移到了身体的末端，它工作得很好。 面部护理

标签： javascript html arrays dom

【解决方案1】：

试试这个：

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

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

【讨论】：