Почему не добавляется атрибут и его значение?

Question

[lookingfor2]

нахожу форму:

let select = document.getElementById('select-form');

нахожу элемент с классом в форме:

let option = select.getElementsByClassName('label');

пытаюсь присвоить атрибут:
option.setAttribute('class', 'vydelit');

Answer 1

[Антон Неверов]

Потому что в переменной option у вас не 1 конкретный option, а массив этих объектов. Вы можете сделать так:

option.forEach((o) => o.setAttribute('class', 'vydelit'));

Так же, вы можете сделать:

let select = document.getElementById('select-form');
let option = select.querySelector('.label');
option.setAttribute('class', 'vydelit');

Но тогда класс будет добавлен только первому элементу с указанным классом.

Comments

[lookingfor2]

let option = select.querySelector('.label');
Возвращает null в консоль
Не понимаю что то )

[Антон Неверов]

Выложите свой код на CodePen. Вместе с HTML. Людям будет проще вам помочь.

[lookingfor2]

Просто не понимаю как это возможно
в консоль на такой запрос
let option = select.getElementsByClassName('label');
console.log(option)
возвращает
HTMLCollection(1)
0: span.label
length: 1

но при этом на этот запрос alert(option[0]);
возвращает undefined

[Александр]

lookingfor2, не может такого быть, вы что-то делаете не так, алертом он должен выводить [object HTMLDivElement]

[lookingfor2]

Александр, спасибо в любом случае ) разобрался

Answer 2

[Александр]

let option = select.getElementsByClassName('label')[0];

Он находит тебе массив с элементами.

Comments

[lookingfor2]

в консоль возвращает undefined

Answer 3

[Rsa97]

Потому что getElementsByClassName возвращает не один элемент, а коллекцию.
Ну и для работы с классами есть свойство classList.

Answer 4

[Stockholm Syndrome]

потому что getElementsByClassName возвращает коллекцию элементов

let option = select.getElementsByClassName('label')[0];

или
let option = select.querySelector('.label');

Comments

[lookingfor2]

let select = document.getElementById('select-form');
let option = select.getElementsByClassName('label')[0];

console.log(option)
возвращает underfined