Почему когда я хочу задать значение переменной ничего не работает?

Question

[4sadly]

Когда пишу
document.getElementsByClassName('nosub');
хром дает подсказкуHTMLCollection(2) [tr.nosub, tr.nosub]
, а когда пишу
var a = document.getElementsByClassName('nosub');
undefined
хочу задать стиль коллекции элементов

Comments

[Comsequent]

Возможно я что-то не уловил, но зачем создавать дополнительную переменную?

for(var i=0; i<document.getElementsByClassName('nosub').length; i++){
document.getElementsByClassName('nosub')[i].classList.add('yourClass');
}

[4sadly]

Comsequent, это добавит всем элементам с классом nosub другой класс?
Я смогу же им просто visible/display поменять?

[Comsequent]

4sadly,

это добавит всем элементам с классом nosub другой класс?
Я смогу же им просто visible/display поменять?

Да.
.style.display = "none";
Я предпочитаю делать через добавление/удаление классов

[4sadly]

Comsequent, оставь свой комментарий как ответ, пожалуйста

[historydev]

Comsequent, сейчас бы фором перебирать массив)))

Answer 1

[Comsequent]

зачем создавать дополнительную переменную?

for(var i=0; i<document.getElementsByClassName('nosub').length; i++){
document.getElementsByClassName('nosub')[i].classList.add('yourClass');
}

Answer 2

[historydev]

function setStyles(selector) {
   selector = document.querySelectorAll(selector);
   selector.forEach(el => {
      el.style.background = '#000'
   })
}

Update:
или "супер" методика классов:

function setStyles(selector) {
   selector = document.querySelectorAll(selector);
   selector.forEach(el => {
      el.setAttribute('class', 'myClass');
   })
}

Answer 3

[Сергей Соколов]

var a = document.getElementsByClassName('nosub');назначает переменной a значение: коллекцию HTML элементов. Если следующей строкой в консоли введёте просто a, появится «подсказка» такая же как в первом варианте.

Чтобы сделать что-то с каждым элементом коллекции, надо её перебрать. Циклом for, или методами массивов, например, forEach():

[ ...document.getElementsByClassName('nosub')].forEach( el => el.style.display = "none" );

Тут [...HTMLCollection] это один из способов сделать из коллекции нормальный массив со всеми его методами, включая forEach(). Подробнее см. spread syntax

Comments

[historydev]

Скажите пожалуйста, зачем 3 точки, по логике это типа Array.from?

[ ...document.querySelector()]

[Сергей Соколов]

Владимир, в данном случае результат, да, одинаковый — массив с элементами из коллекции.

Отличие Spread syntax, в том, что он, например, позволяет тут же добавить ещё элементов:

[ document.getElementById("id1"), ...document.querySelectorAll(".someclass"), myButton]

И запись короче, всего три точки, пара скобок )

[historydev]

Сергей Соколов, круто! Спасибо большое)

Answer 4

[Forusta]

Вы пишите: "хром даёт подсказку" - речь о вводе кода в консоли хрома? Если да, то следует понять один момент: если вы вводите выражение, которое возвращает какой-либо результат, он будет выведен в консоли ниже. Если же у выражения нет результата, то будет undefined. Присваивание данных в переменную как раз второй случай. После присваивания напишите имя вашей переменной - и увидите тот же результат, что в вашем первом примере