getElementsByClassName() 返回的是一个“实时 HTMLCollection”，而非单个元素，因此不能直接访问 .style 属性；必须遍历集合或通过索引获取具体元素才能操作。

为什么 `getelementsbyclassname()` 无法直接设置样式？`getelementsbyclassname()` 返回的是一个“实时 htmlcollection”，而非单个元素，因此不能直接访问 `.style` 属性；必须遍历集合或通过索引获取具体元素才能操作。

document.getElementsByClassName("btn") 的本质是一个类数组的动态集合（HTMLCollection），它包含所有匹配 .btn 类的 DOM 元素，但本身没有 style、innerText 或 addEventListener 等元素实例才具备的属性和方法。因此，以下代码会静默失败（不报错但无效）：

document.getElementsByClassName("btn").style.width = "120px"; // ❌ 错误：HTMLCollection 没有 .style

要修正它，你必须明确作用于每个具体元素。例如：

✅ 方式一：通过索引访问第一个按钮（仅适用于单个元素）

document.getElementsByClassName("btn")[0].style.width = "120px";

✅ 方式二：遍历全部按钮（推荐）

const btns = document.getElementsByClassName("btn");
for (let i = 0; i <p>⚠️ 注意：getElementsByClassName() 返回的是<strong>实时集合</strong>（live collection）——如果后续 DOM 动态新增/删除 .btn 元素，该集合会自动更新。这在循环中可能引发意外行为（如无限循环），且性能不如静态集合。</p><p>✅ 更现代、更推荐的替代方案是 document.querySelectorAll()，它返回<strong>静态 NodeList</strong>，支持 forEach()，语义清晰，兼容性好（IE9+）：</p><pre class="brush:php;toolbar:false;">document.querySelectorAll(".btn").forEach(btn => {
  btn.style.width = "120px";
});

? 小结：

• ❌ 错误根源：混淆“集合”与“元素”——.style 是单个元素的属性，不能直接用于集合；
• ✅ 正确做法：先获取集合，再用循环或数组方法逐个操作；
• ? 最佳实践：优先使用 querySelectorAll() + forEach()，语义明确、性能可控、代码简洁；
• ? 补充提醒：确保 JavaScript 在 DOM 加载完成后执行（如将 <script> 移至 </script>