JS - Понимание document.querySelectorAll с именем класса

Question

Мне нужно было получить некоторые элементы в форме, чтобы изменить их стиль onchange<select>. Я добавил класс new_cat_inputs к элементам, и я думал, что получу их на document.querySelectorAll().
Я пробовал много вещей, но он никогда не работал, я, наконец, использовал:

document.getElementsByClassName("new_cat_inputs") 

Это означает, что моя проблема была решена, но я хочу понять.
Вот что я пытался раньше:

// first attempt, as I'd have used document.querySelector() which works this way 
document.querySelectorAll(".new_cat_inputs"); 

// Logs an error which says it can't read the property "querySelectorAll" of null (body) 
document.body.querySelectorAll(".new_cat_inputs"); 

// doesn't get the elements neither as the 1st attempt. Neither with document.body 
document.querySelectorAll("label.new_cat_inputs, input.new_cat_inputs, select.new_cat_inputs"); 

Я прочитал MDN documentation, который часто помогает, но не на этот раз.

Что такое правильный способ выбора нескольких элементов DOM от их класса в всем документе функция document.querySelectorAll()?

Answer 1

так document.body кажется, null в вашем примере, что означает, что DOM не загружен. следующий слушатель событий позволяет ждать DOM для загрузки, а затем выполнить свой код:

window.addEventListener('DOMContentLoaded', function() { 
    // your code 
}) 

Я думаю (я не уверен), что Yout getElementsByClassName работал, потому что вы использовали его в другом месте, или когда DOM был загружен. И поскольку этот метод возвращает в прямом эфиреHTMLCollection, он был обновлен при загрузке DOM.

См the following link

Приветствия,