getElementsByClassName
Coddyの「JavaScript DOM メソッド」コースのレッスン 5/13。
getElementsByClassName() 関数は、一致する クラス属性 を持つすべての要素の 配列 を返します。これは、同じスタイルや動作を共有する複数の要素を選択するのに便利です。例えば：
const elements = document.getElementsByClassName("className");上記は、クラスが className である要素を取得し、それらを elements という名前の変数に保存します。
これらすべての類似した要素のプロパティを変更するには、この変数を反復処理する必要があります。例えば：
for (const element of elements) {
className.style.color = "blue";
className.style.fontWeight = "bolder";
}
チャレンジ
簡単クラス名 highlight を持つ段落を含むHTMLコードが与えられています。
JavaScriptのみを使用して、テキストの色とフォントの太さを変更してください：
getElementsByClassName()関数を使用して要素を取得します。- 取得した要素の変数を
forループを使用して反復処理します。 - 配列内のすべての要素に対して、
styleプロパティを使用してcolorを“orange”に、fontWeightを“bold”に変更します。
変更を確認するには、ウェブページを更新する必要があります：
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<p class="highlight">Text 1</p>
<p class="highlight">Text 2</p>
<script src="script.js"></script>
</body>
</html>