Добавление атрибута к элементу Javascript

Question

Я JavaScript новичок и может использовать вашу помощь с ниже запроса:

Я должен был найти все Ли помещен в навигационном тег в HTML. Теперь я должен проверить, есть ли у атрибута data-direction, а если нет - установите для этого атрибута значение «top». Я попытался сделать это, используя простой цикл, но он, похоже, не работает - я продолжаю получать информацию с консоли, что «направление не определено», поэтому кажется, что он не видит «направление данных» в качестве атрибута. Может быть, я должен указать этот атрибут по-другому? Вот мой код:

var navLi = document.querySelectorAll("nav li"); 

    for (i = 0; i < navLi.length; i++) { 
     if (navLi[i].data-direction === " ") { 
     navLi[i].data-direction = "top"; 
     } 
    } 

Заранее благодарен!

Answer 1

Вы ищете hasAttribute()/setAttribute().

for (i = 0; i < navLi.length; i++) { 
    if (!navLi[i].hasAttribute('data-direction')) { 
    navLi[i].setAttribute('data-direction', 'top') 
    } 
} 

Answer 2

GetAttribute() возвращает нуль или пустую строку, так что вам нужно использовать метод hasAttribute() для обработки нулевого случая.

for (var item of document.querySelectorAll("nav li")) { 
    if (!item.hasAttribute("data-direction") || item.getAttribute("data-direction").trim() === "") { 
    item.setAttribute("data-direction", "top"); 
    } 
}