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

Posted 2023-03-05

【中文标题】如何在不清空 HTMLCollection 的情况下将其转换为数组？

【英文标题】：How do I convert a HTMLCollection into an array, without emptying it?

【发布时间】：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 运行 之后 之前不存在以供查询。

阅读这个问题，看看它是否适用：***.com/a/24070373/691711

是的，我的脚本标签在头部。现在我已经把它移到了身体的末端，它工作得很好。 面部护理

【参考方案1】：

试试这个：

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

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