如何从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，因为它太长了。以下是子元素：

- Michał Ziembiński

---

尝试使用 document.getElementsByClassName("jcrop-holder")[0] 和 document.querySelector(".jcrop-holder")。 - Tushar

你应该向我们展示你的全部代码（或者至少是使用 console.log 的部分和你尝试使用它的部分）。看起来你在控制台登录和尝试使用它之间改变了那个类。 - Buzinas

getElementsByClassName返回一个_实时集合_。控制台中的小蓝色“i”表示当您展开数组时它将被评估。在检索集合并使用console.log输出其属性之间，以及在控制台中实际检查集合之间，显然存在某些差异。 - James Thorpe

请注意，console是异步工作的。尝试更改col[0]中的某些内容，尽管控制台显示它为“未定义”。 - Teemu

我也遇到了同样的问题，这个问题还有其他的答案吗？ - Julha

@JamesThorpe，我该如何调查您的评论？我遇到了同样的问题。 - Timo

Answer 1

来源： 无法访问HTMLCollection的值

问题是您将脚本放在标题中，这会在加载HTML元素之前执行，因此getElementsByClassName（）将不返回任何元素。

其中一种解决方法是等待HTML元素加载完毕，然后再执行脚本，为此，您可以使用window对象的load事件。

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

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

- jasminejeane

---

OP可以访问集合，但不能访问第一个。所以你的答案在这里没有帮助。var col = (document.getElementsByClassName("jcrop-holder"));console.log(col);可以工作，但不是col[0]。 - Timo

Answer 2

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

- Greenish

Answer 3

看看这段代码，它可以让你为HTML Collection使用类属性。

  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...
            })

    } 

- albertto