为何document.getElementsByClassName返回类数组？模态框代码[0]作用解析

一、为什么document.getElementsByClassName返回类数组对象？ #

这其实是DOM API的设计逻辑决定的，核心原因有两点：

• 动态同步DOM变化：它返回的是HTMLCollection类型的类数组对象，这是一个动态集合——当页面里新增、删除或修改了带目标类名的元素时，这个集合会自动更新，不需要你重新调用方法获取最新结果。如果返回普通数组，那就是静态的快照，无法实时同步DOM的变化。
• 轻量性与定位匹配：早期浏览器设计DOM API时，普通数组（Array）自带forEach、map等一堆方法，而HTMLCollection作为专门的元素集合，只保留了length属性和索引访问的能力，更轻量，也更贴合“仅作为DOM元素容器”的定位。

要是你需要把它转成普通数组来用，可以用Array.from(collection)或者扩展运算符[...collection]来实现。

二、w3school模态框示例中[0]索引的作用 #

先理清楚场景：一般模态框的实现里，页面只会存在一个带目标类名的模态框元素（比如类名为modal）。但document.getElementsByClassName('modal')返回的是所有匹配该类名的元素集合——哪怕只有一个元素，它依然是HTMLCollection类数组，不是单个可操作的DOM元素。

所以这里的[0]作用很明确：

• 关闭模态框的操作（比如设置style.display = 'none'）是针对单个DOM元素的，不能直接作用于整个集合。[0]就是从集合里取出第一个（也是唯一一个）元素，把它转换成可操作的DOM节点。
• 如果去掉索引，你拿到的是整个集合对象，调用元素的属性/方法自然会失败；如果换成其他索引（比如[1]），但页面里根本没有第二个带该类名的元素，就会得到undefined，执行代码时也会报错。

举个直观的代码对比：

// 错误：直接操作集合，无法生效
document.getElementsByClassName('modal').style.display = 'none';
// 正确：取出第一个元素后执行关闭操作
document.getElementsByClassName('modal')[0].style.display = 'none';

简单说，索引就是用来从类数组集合里“揪出”具体的DOM元素，这样才能执行后续的关闭逻辑。

内容的提问来源于stack exchange，提问作者Vlad Norton