如何在 Javascript/Babel 中遍历 HTMLCollection答案

【问题标题】：How to iterate through HTMLCollection in Javascript/Babel如何在 Javascript/Babel 中遍历 HTMLCollection
【发布时间】：2019-05-25 19:28:00
【问题描述】：

我正在尝试使用 webpack 和 Babel 建立一个网站。我正在尝试使用 jQuery 将“onclick”事件分配给表内的所有项目。我正在使用 getElementsByClassName 选择所有“可点击行”表行项目，它返回一个 HTMLCollection，但是当调用它的 .length 时，它返回 0。将集合打印到控制台显示其中有项目。这让我认为这是一个 Babel 问题。

我尝试将其转换为数组 - 数组为空。尝试了document.querySelectorAll();，它返回空的 NodeList 和 ... 运算符，尝试使用.forEach() 并尝试使用HTMLCollection.prototype.forEach = Array.prototype.forEach;，其中没有一个会导致任何地方。

这是我正在使用的代码：

$('document').ready(getTableRows);

function getTableRows() {
    let tableRows = document.getElementsByClassName("clickable-row");
    console.log(tableRows);
    console.log("Length of this collection = " + tableRows.length);
    let array = Array.from(tableRows);
    console.log("Converted to array");
    console.log(array);
}

这是 google chrome 中控制台返回的结果：

HTMLCollection []
    0: tr.clickable-row
    1: tr.clickable-row
    2: tr.clickable-row
    3: tr.clickable-row
    4: tr.clickable-row
    5: tr.clickable-row
    6: tr.clickable-row
    7: tr.clickable-row
    8: tr.clickable-row
    9: tr.clickable-row
    length: 10
    __proto__: HTMLCollection

Length of this collection = 0

Converted to array
[]
    length: 0
    __proto__: Array(0)

我尝试在 jsfiddle 中重新创建相同的东西，但它并没有导致相同的行为，这让我更加认为它是 Babel/webpack 的东西。 http://jsfiddle.net/h2emxdf1/2/

对不起，如果我把事情搞混了，但如果涉及到整个 webpack 事情，我是新手。

【问题讨论】：

getElementsByClassName returns a live collection of found elements。所以我假设在你的代码运行的那一刻，它没有找到任何匹配的元素。但后来它会相应地更新列表。请注意，控制台不一定在您记录对象时反映对象的状态，而只是在您扩展对象的那一刻。
要验证 str 的想法，请将第一行更改为这一行： $('document').ready(function() { setTimeout(getTableRows, 5000); });并在打开页面后等待 5s 在控制台上查看结果。
感谢你们两位，我了解到 js 异步执行函数，这正是 str 指出的。我设法通过创建回调来解决这个问题。如果您将评论作为答案发布，我可以将其标记为答案。

标签： javascript webpack babeljs htmlcollection

【解决方案1】：

感谢@str，我意识到 js 异步执行函数，这确实是我的问题。所以我创建了一个回调。现在它可以正常工作了。

【讨论】：