Подскажите как правильно находить элемент в Html, из модуля js?

Question

Застрял в одном месте читаю информацию на разных сайтах не могу найти причину такого поведения.

У меня есть html страница которая содержит:

<ul class="unordered-list"></ul>

в этот список, через js добавляются li, из шаблона. Мне необходимо чтобы по клику на одном элементе к данному списку добавлялся класс.

Ментор сказал по id ничего не искать и вообще не вписывать их, поэтому ищу все что нужно по классу.

Написал следующее :

    const ul = document.getElementsByClassName('unordered-list');
    console.log(ul);
    ul.classList.add("random-class");

в констатне по классу идентифицирую мой список, консоль лог выводит HTMLCollection [ul.unordered-list] далее я пытаюсь добавить класс к этому элементу html, получаю ошибку Uncaught TypeError: Cannot read property 'add' of undefined at HTMLUListElement.<anonymous> (main.js:130)

смущает вот это указание про коллекцию, а не просто строкой код, подозреваю что это какая то глупая ошибка из за непонимания с моей стороны, разъясните этот момент пожалуйста.

А подскажите или укажите где можно почитать, из за чего необходимо добавлять [0] ? У меня только 1 элемент на странице с классом по которому я ищу.
Это очень интересно, работает как нужно в таком случае:

const ul = document.getElementsByClassName('unordered-list')[0]; — Mark, Aug 07 '19 at 20:15
@Mark, загугли: Document.getElementsByClassName() MDN. MDN - Document.getElementsByClassName(), JSLearrn - getElementsBy* — Виталик Черный, Aug 07 '19 at 20:27
@Mark document.querySelector('.unordered-list').classList.add("random-class"); — , Aug 07 '19 at 20:33
Возможный дубликат вопроса: Почему идет ошибка like.addEventListener is not a function? — , Aug 07 '19 at 22:49

Подскажите как правильно находить элемент в Html, из модуля js?

0 Answers0