Javascript Vanilla JS TypeError:无法读取属性

我有一个带有徽标和导航的标题，它有一个菜单切换链接，显示在较小的视口中。我试图用Vanilla JS实现这一点，因为我想离开jQuery

当我点击菜单切换链接时，会出现以下错误：UncaughtTypeError:

无法读取HtmlElement处null的属性“className”。（ignition.js:6）（匿名）@ignition.js:6

我目前正在学习Vanilla JS，我在理解这意味着什么以及错误可能在哪里方面有点困难

const-navToggle=document.querySelector（“.nav-toggle”）；
navToggle.addEventListener（“单击”，（事件）=>{
const navItem=event.currentTarget.querySelector（“.nav项”）；
if（navItem.className.includes（“活动”））{
navItem.className.remove（“活动”）；
event.target.find（“a”）.innerHTML（“”）；
}否则{
navItem.className.add（“活动”）；
event.target.find（“a”）.innerHTML（“”）；
}
});


navItem
为
null
，因为您正在对当前目标调用
查询选择器（“.nav项”）
，当前目标是
…
元素。该元素不包含任何具有类
nav item
的子元素，这是因为当您单击特定的
nav toggle
元素并试图从中使用
querySelector
时，它将返回null，因为它下面不存在
nav item
元素

看起来您想要做的是在整个菜单中找到所有子元素，并应用与以下类似的必要逻辑：

const navToggle = document.querySelector(".nav-toggle");

navToggle.addEventListener("click", (event) => {
    // You'll likely want a reference to your "toggle" element if you need
    // to access it within the loop
    const toggle = event.currentTarget;

    // Get the top level menu
    const menu = document.querySelector(".nav-menu");

    // Get your menu items and iterate through them
    const menuItems = menu.querySelectorAll(".nav-item")

    // Iterate through your individual items here
    menuItems.forEach(navItem => {
         // Add your logic here
    });

});

也许以下是实现您所需的代码：单击“导航切换”图标时：


切换所有导航项目的
激活状态
导航切换的切换图标


const-navToggle=document.querySelector（“.nav-toggle”）；
navToggle.addEventListener（“单击”，（事件）=>{
//切换图标
const curIcon=document.querySelector（'.nav切换i'）
curIcon.classList.toggle（'fa-bar'））
curIcon.classList.toggle（'fa-times'）
//切换导航项目的激活状态
const navItems=document.getElementsByClassName（'nav-item'）
适用于（海军工程项目中的海军工程项目）{
navItem.classList.toggle（'active'）
}
});


我在下面的答案中生成了可运行的代码，请检查是否有您不明白的地方？