Javascript:无法迭代 getElementsByClassName

Question

我正在尝试以下 JavaScript 代码。它直接取自 w3school 示例，但由于某种原因无法正常工作。

<script>
var coll = document.getElementsByClassName("collapsible");
var i;
console.log(coll);
console.log(coll.length);

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

我在控制台打印了coll和coll.length的值来调试。正如预期的那样，Coll 将成为 10 个项目的 htmlcollection。但是 coll.length 是 0。这就是为什么代码不会进入 for 循环。如果我通过执行以下操作强制代码进入循环内部:

for (i = 0; i < 1; i++) {

我在控制台中收到以下信息:

Uncaught TypeError: Cannot read property 'addEventListener' of undefined

HTML代码如下:

<button class=\"collapsible\">Open Collapsible</button>
<div class=\"content\"> <p>Lorem ipsum...</p> </div>

Answer 1

getElementsByClassName返回实时 HTML 集合。这意味着您需要从该实时 HTML 集合创建一个数组。为此，请使用 Array.from .

<script>
var coll = Array.from(document.getElementsByClassName("collapsible"));
var i;
console.log(coll);
console.log(coll.length);

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

编辑

@zerkms 关于您需要在运行代码之前确保文档已准备就绪的说法是正确的:

<script>
document.addEventListener('DOMContentLoaded', () => {
  var coll = Array.from(document.getElementsByClassName("collapsible"));
  var i;
  console.log(coll);
  console.log(coll.length);

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }
})
</script>

你不需要那个Array.from(我错了)但是，嘿，没有什么坏处。