Javascript 使用getElementsByClassName时无法读取未定义的属性

我有一个很奇怪的问题，我似乎无法解决。我已经编写了一段代码，我想在某个元素具有此特定类名时使用它，因此我完成了以下操作：

function slide() {
    var box = document.getElementsByClassName('box'); 
    if(box.style.maxHeight !== "100px") {
        box.style.maxHeight = "100px";
        box.style.opacity = "1";
    } else {
        box.style.maxHeight = "0";
        box.style.opacity = "0";
    }
    return false;
}       

以及HTML：

<h1 onclick="slide();"> Text </h1>

<div class="box">
    <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
    </p>
</div>

我想我错过了一些东西，但我不知道是什么有趣的是：当我使用

getElementById

时，它是有效的！但是我想改为使用类名，这是行不通的

我得到的错误是：

未捕获的TypeError:无法读取未定义的属性“maxHeight”

---

getElementsByClassName

返回一个数组。它的项具有

style

属性，而不是数组本身。

按类名获取元素返回HTML集合。您需要在每个元素上分配它：

   var box = document.getElementsByClassName('box')[0];

var boxes = document.getElementsByClassName('box'); 
for(box of boxes){
 //work with elem
 if(box.style.maxHeight !== "100px") {
   box.style.maxHeight = "100px";      
   box.style.opacity = "1";
 } else { 
   box.style.maxHeight = "0";     
   box.style.opacity = "0";
}
}

---

var-box=document.getElementsByClassName（'box'）[0]

for…of。是他们的[Symbol.iterator]标准吗？与NodeList不同，规范没有说它们是可移植的。@Oriol不知道……请不要忘记解释/注释您的代码，并提供相关文档[来自审阅]

var boxes = document.getElementsByClassName('box'); 
for(box of boxes){
 //work with elem
 if(box.style.maxHeight !== "100px") {
   box.style.maxHeight = "100px";      
   box.style.opacity = "1";
 } else { 
   box.style.maxHeight = "0";     
   box.style.opacity = "0";
}
}