javascript - 如何使用 .forEach 循环并使用 DOM 进行更改

Question

我正在学习如何使用 DOM。我试图使用带有 querySelectorAll("a") 的 .forEach (或 for 循环，但更喜欢 .forEach)来循环遍历每个 anchor 并更改它在 anchor 中所说的内容。就像我希望第一个 Anchor 被称为 Services，第二个是 Product，等等......我一直在做的是这样的事情，这不是 .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

我会创建一个您需要分配的文本内容数组，然后遍历它们并访问 i 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>