你如何从javascript HTMLCollection中获取元素

Question

我无法理解为什么我无法从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,因为它太长了.这是儿童元素:

Answer 1

取自:无法访问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中