你如何从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

取自：Can't 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中

Answer 2

我遇到了同样的问题，解决这个问题的方法是将我的脚本放在文档的末尾，以便在开始更改或选择HTMLCollection元素之前等待整个文档的加载。 希望它有所帮助。

Answer 3

看这段代码，您可以使用它为HTMLColletion使用class属性

  var eles = document.getElementsByClassName('className');
    for (let i = 0; i < eles.length; i++) {            
            eles[i].addEventListener('click',function(){
                // code ex. eles[i].querySelector(".contenedor").classList.toggle('ocultar');
                // code here...
            })

    }