如何从 javascript HTMLCollection 获取元素

我不明白为什么我无法从 HtmlCollection 获取元素。此代码示例：

 var col = (document.getElementsByClassName("jcrop-holder"));
 console.log(col);

在控制台上产生以下输出：

我正在尝试获取 dic.jcrop-holder 对象，但无法从变量 col 中获取它。这些都不起作用：

  console.log(col[0]); // undefined
  console.log(col.item(0)); // null

  // check length of collection

  console.log(col.length); // 0

那么如果长度为0，为什么控制台显示长度为1，以及里面的对象呢？当我打开节点时，它包含子节点。这是怎么回事？

这是一些扩展的节点。我没有展开 div.jcrop.holder 因为它太长了。以下是子元素：

取自 ：无法访问 HTMLCollection 的值 https://stackoverflow.com/questions/32222255/cant-access-the-value-of-htmlcollection

问题是您已将脚本放置在标头中，该脚本在加载 html 元素之前执行，因此 getElementsByClassName() 将不会返回任何元素。

一种解决方案是等待 html 元素加载然后执行脚本，为此您可以使用窗口对象加载事件

window.addEventListener('load', function () {
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
})

或者，您可以将脚本放置在 body 元素的底部而不是 head 中，以便在解析和执行脚本时，元素已加载到 dom 中