Javascript 类型“HtmleElement”上不存在属性“length”

我正在尝试循环我拥有的导航项目的数量。但是当我这样做时，我得到了一个错误：属性'length'在类型'HTMLElement'上不存在。我知道我可以将document.getElementById'nav-item更改为document.getElementsByClassName'nav-item'，错误就会消失。但我不是想这么做。我是通过它的id访问元素的。有人能帮我吗

const header = document.getElementById('applicationLinks');
const navItems = document.getElementById('nav-item');
for (let i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener('click', function () {
      const current = document.getElementsByClassName('active');
      current[0].className = current[0].className.replace('active', '');
      this.className += ' active';
    });
}

---

谢谢你，我是个新手，希望你能帮我。

你的问题是for循环

代码

const navItems = document.getElementById('nav-item');

不返回元素数组。它返回单个对象

因此，请删除for循环

试试这个

const header = document.getElementById('applicationLinks');
const navItems = document.getElementById('nav-item');

navItems.addEventListener('click', function () {
      const current = document.getElementsByClassName('active');
      current[0].className = current[0].className.replace('active', '');
      this.className += ' active';
    });
}

如果navItems更改为document.getElementsByClassName'nav-item'；

---

然后你会得到你的对象数组。这将使for循环工作。

offtopic：不使用className use和add/remove/togglegetElementByID方法，而是为您提供单个元素而不是am ArrayAvitems是单个值，document。getElementById'nav-item'将只为您提供一个值，因为您不能有多个具有相同id的元素，因此，length属性很简单，这解决了我消除原始错误的问题。但我想做的是，突出显示我当前活动的导航项。for循环中的代码看起来不正确。如果这是您想要实现的，请尝试发布您的html以及所有涉及的JS。@Mike_Smith如果这些是应用程序的主导航链接，还可以使用RouterLink Active在指定路由时添加类active@IvanS95他可以使用ngStyle，但如果他保持低调，看起来几乎一样非常感谢您的快速反馈。对于像我这样的人来说，这会让学习体验更好。