如何使用 .forEach 循环并使用 DOM 更改内容

Question

我正在学习如何使用 DOM。我试图使用 .forEach（或 for 循环，但更喜欢 .forEach）和一个 querySelectorAll("a") 来循环遍历每个锚点并更改它在锚点中的内容。就像我希望第一个锚点被称为服务，第二个锚点被称为服务，等等......我一直在做的是这样的事情，它不是 .forEach 或 for 循环：

let navItems = document.querySelectorAll("a")

navItems[0].textContent = "Services"
navItems[1].textContent = "Product"
navItems[2].textContent = "Vision"
navItems[3].textContent = "Features"
navItems[4].textContent = "About"
navItems[5].textContent = "Contact"

这做我想要的，但是我只想使用 .forEach 尝试循环浏览每个导航项目以更改每个项目的名称，但我很难找到方法。我知道有很多不同的方法可以做到这一点，但我特别希望通过 .forEach 甚至只是一个常规的 for 循环来做到这一点。我正在尝试操作此代码中的 HTML：

 <nav>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </nav>

如果你看一下控制台，看起来像这样：

 <nav>
                <a href="#">Services</a>
                <a href="#">Product</a>
                <a href="#">Vision</a>
                <a href="#">Features</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </nav>

我希望我的措辞是正确的，这是我第一次在这里提问。

Answer 1

我会创建一个您需要分配的文本内容数组，然后遍历它们并访问ith 元素navItems：

const texts = ['Services', 'Product', 'Vision', 'Features', 'About', 'Contact'];
const as = document.querySelectorAll('a');
texts.forEach((text, i) => {
  as[i].textContent = text;
});

<nav>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</nav>