


Блог IT-шника
Блог IT-шника
Привіт:) У цій короткій замітці покажу простий спосіб, як додати атрибут 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');
});