如何将使用 getElementsByClassName 返回的 HTMLcollection 转换为 Array

Question

Array.from() 或 Array.prototype.slice.call() 或使用 for 循环将 htmlcollection 添加到数组中，无法将 HTMLcollection 从 getElementsByClassName 转换为数组，以便我可以迭代数据。注意：不想使用 querySelectorAll 因为内容是动态添加的，所以 querySelectorAll 不获取元素。考虑代码：下面

document.addEventListener('DOMContentLoaded', function () {

    const convochats = document.getElementsByClassName('onechat');
    console.log(convochats); //This return a HTMLcollection of elements with onechat class

    // case 01:
    let convochatsArray_case01 = [];
    for (let i = 0; i < convochats.length; i++) {
        convochatsArray.push(convochats[i])
        console.log(convochatsArray_case01); //This return empty array
    }

    // case 02
    let convochatsArray_case02 = Array.from(convochats);
    console.log(convochatsArray_case02); //This return empty array

    // case 03
    let convochatsArray_case03 = Array.prototype.slice.call(convochats);
    console.log(convochatsArray_case03); //This return empty array
})

我试图将 HTMLcollection 转换为数组，以便我可以迭代它们

Answer 1

您无法有效地将 getElementsByClassName 的返回值转换为数组，这与您无法使用 querySelectorAll 的原因相同。

当您尝试遍历数组时，这些元素并不存在。该阵列也未上线。

您需要在元素存在时创建数组。