DOMから多くの要素を読み込みます

Question

私はJSの基本を知っていますが、私は次のステップに進んでいきたいと思います。

多くの要素についてJSの助けを借りてCSSを変更したいと思います。

name.style.cssproperty = "something"; 

そして、これは大丈夫です。問題は、要素を選択するために、私が知っている唯一の方法は、だから私は後でその名前でその要素を参照するとによって、そのスタイルを変更することができます

const name = document.getElement...(id/class/tag etc.); 

であるということですしかし、私がすでに10の要素を持っているとき、私はそれをそうするのは非常に非効率だと感じます。

だから私の質問は、動的に、より効率的にCSSを変更するためのより良い方法はありますので、私のコードの先頭には、このようには見えませんが、次のとおりです。

const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
etc... 

それともそれは非常に多くの変数を持つことが普通です？

私の質問が理解できることを願っています。

PS：

モジュラJavaScriptについて学習し始めました。これは私の問題に役立つものですか？

Answer 1

あなたが特定のクラスによって、すべての要素を取得することができます

今

const elements = document.querySelectorAll('my-class'); 

することができますフェッチされた要素をループ：

for (var i = 0; i < elements.length; i++) { 
    elements[i].style.cssproperty = "something"; 
} 

それともES6 +は、ご使用の環境で利用可能な場合：

elements.forEach(element => element.style.cssproperty = "something");