Як HTML-тегові додати атрибут [JavaScript]

Привіт:) У цій короткій замітці покажу простий спосіб, як додати атрибут HTML-тегові.

Нехай є блок

<nav id="menu">
  <ul>
	  <li><a href="https://site.com"><span>Page 1</span></a></li>
	  <li><a href="https://site.com"><span>Page 2</span></a></li>
	  <li><a href="https://site.com"><span>Page 3</span></a></li>
  </ul>
</nav>

У коді тегові <nav> потрібно додати атрибут aria-label із значенням 'Main Menu'.

В результаті хочу отримати

<nav id="menu" aria-label="Main Menu">
  <ul>
	  <li><a href="https://site.com"><span>Page 1</span></a></li>
	  <li><a href="https://site.com"><span>Page 2</span></a></li>
	  <li><a href="https://site.com"><span>Page 3</span></a></li>
  </ul>
</nav>

Рішення на JavaScript виглядатиме так:

// Вибрати перший елемент <nav>
let firstNavElement = document.querySelector('nav');
// Встановити атрибут aria-label
firstNavElement.setAttribute('aria-label','Main Menu');

Скрипт вибирає лише перший елемент <nav>. Але їх може бути декілька на одній сторінці. Якщо потрібно додати атрибут для всіх:

// Вибрати всі елементи <nav>
let allNavElements = document.querySelectorAll('nav');
allNavElements.forEach(function(allNavElement) {
    // Встановити атрибут aria-label
    allNavElement.setAttribute('aria-label','Main Menu');
});

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *