JS - クラス名を使用してdocument.querySelectorAllを理解する

Question

の<select>のスタイルを変更するために、いくつかの要素をフォームに追加する必要がありました。私はクラスにnew_cat_inputsクラスを追加しました。私はdocument.querySelectorAll()でそれらを得るだろうと思っていました。
私は最終的に使用し、私は多くのことをしようとしたが、それは働いたことはない：

document.getElementsByClassName("new_cat_inputs") 

それは私の問題が解決されていますが、私は理解することを意味します。私は頻繁にこの時間を助けなくMDN documentationを読ん

// 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"); 

：ここ
は、私が前に試したものです。

文書全体の機能document.querySelectorAll()によってで自分クラスことにより、複数のDOM要素を選択する正しい方法は何ですか？

Answer 1

があなたの例ではnullと思われるため、DOMがロードされていないことを意味します。あなたは時に別の場所にまたはそれを使用しているため、そのYOUT getElementsByClassNameが働いていた（私はよく分からない）

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

私は思う： 次のイベントリスナーを使用すると、DOMがロードされるのを待ってから、あなたのコードを実行することができますDOMが読み込まれました。このメソッドはを返します。HTMLCollectionがDOMをロードすると更新されます。

はあなたの例では