使用querySelectorAll后无法调用addEventListener函数的问题

你遇到的错误核心原因是：document.querySelectorAll('.nav-link')返回的是NodeList（DOM元素集合），而不是单个DOM元素。只有单个DOM元素才有addEventListener方法，直接给集合调用这个方法自然会报错。

解决方案1：遍历集合给每个元素绑定事件 #

修改你的JavaScript代码，用forEach遍历navLink集合，给每个导航项单独绑定点击事件：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.navbar');
    const navLink = document.querySelectorAll('.nav-link');

    burger.addEventListener('click', () => {
        nav.classList.toggle('navbar-active');
    });

    // 遍历每个导航链接，添加点击事件
    navLink.forEach(link => {
        link.addEventListener('click', () => {
            nav.classList.remove('navbar-active');
        });
    });
}

navSlide();

解决方案2：事件委托（更高效，适合动态元素） #

如果后续可能会动态新增导航链接，推荐用事件委托——给父元素navbar绑定一次事件，利用事件冒泡机制处理子元素的点击：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.navbar');

    burger.addEventListener('click', () => {
        nav.classList.toggle('navbar-active');
    });

    // 给父元素绑定事件，判断点击源是否是导航链接
    nav.addEventListener('click', (e) => {
        // 检查点击的元素是否属于.nav-link（包括子元素a标签）
        if (e.target.closest('.nav-link')) {
            nav.classList.remove('navbar-active');
        }
    });
}

navSlide();

这种方法不用遍历所有子元素，性能更优，而且新增的导航链接也能自动生效。

补充说明 #

你之前尝试querySelectorAll('.nav-link a')无效，也是因为同样的问题——返回的是集合，没有遍历就直接调用addEventListener。如果想监听<a>标签的点击，只需要把遍历的目标换成这个集合即可，或者在事件委托里调整判断条件为e.target.tagName === 'A'。

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