Как использовать .forEach, чтобы l oop через и изменить вещи, используя DOM

Question

Я учусь пользоваться DOM. Я пытался использовать .forEach (или a для l oop, но предпочел бы .forEach) с querySelectorAll ("a"), чтобы циклически проходить через каждый якорь и изменять то, что он говорит внутри якоря. Как я хотел бы, чтобы первый Anchor назывался Services, второй - Product, et c ... То, что я делал, было что-то вроде этого, которое не является .forEach или a для l oop:

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 или даже просто для l oop. Я пытаюсь манипулировать 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

Я бы сделал массив из текстового содержимого s, которое вам нужно вместо этого назначить, затем перебрал бы их и получил бы доступ к i th элементу 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>

Answer 2

Поскольку forEach выполняет итерацию по массиву, вы должны начать с массива значений, которые вы хотите ввести.

Затем вы можете использовать второй аргумент forEach, чтобы указать индекс в массив, который должен соответствовать индексу элемента.