JavaScript DOM操作故障：点击burgerbar无法切换nav-bar的active类

错误点分析 #

1. getElementsByClassName参数错误：这个方法接收的是纯类名，不需要加.前缀，你写.burgerbar会导致找不到目标元素。
2. 返回值类型问题：getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM元素，不能直接给它绑定onclick事件，得取数组里的第一个元素。
3. DOM加载顺序问题：如果JS文件放在<head>标签里，代码执行时DOM还没渲染完成，会导致获取不到元素，点击自然无反应。

修正后的推荐代码 #

沿用你内嵌时可用的querySelector，同时确保代码在DOM加载完成后执行：

// 等待DOM全部渲染完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  const burgerbar = document.querySelector(".burgerbar");
  const navbar = document.querySelector(".nav-bar"); // 提前获取元素，避免重复查询DOM

  burgerbar.onclick = function () {
    navbar.classList.toggle("active");
  };
});

修复getElementsByClassName的替代方案 #

如果坚持使用这个方法，需要修正参数并取第一个匹配元素：

document.addEventListener('DOMContentLoaded', function() {
  const burgerbar = document.getElementsByClassName("burgerbar")[0]; // 去掉.前缀，取第一个元素
  const navbar = document.querySelector(".nav-bar");

  burgerbar.onclick = function () {
    navbar.classList.toggle("active");
  };
});

额外优化提示 #

• 用const/let声明变量，避免全局变量污染（你原代码里navbar未加声明，会自动成为全局变量，不推荐）。
• 提前获取nav-bar元素，不用每次点击都重新查询DOM，提升性能。

内容的提问来源于stack exchange，提问作者S. Mazii