はじめに

WEBコーディングにおいてJavaScriptを使用する場合、HTML内のClassを取得するのがその第一歩だと思います。

JavaScriptの使い始めの頃は「こういうケースではどう記述するのか？」と悩んだり、思うように取得できなかったり随分と悩んだ経験があります。

私のJavaScriptは独学ですが、JavaScriptでのClassの取得方法について今一度まとめてみたいと思います。

目次

IDを取得する場合「getElementById」

「Classを取得する」と書いたのに、いきなり別のことをしています。

まぁID取得の方がClassより若干シンプルで後に説明を加えたい点もあるので、まずはIDの取得方法から説明します。

JavaScriptでIDを取得する場合getElementByIdメソッドを使用します。

例えば、次のHTMLテキストの色を赤く変えたい場合、document.getElementById('ID名')と記述し、その後ろに.style.color = "red";を記述します。

このページではHTML内にJavascriptを記述していますが、Javascriptを同じhtmlファイル内に記述する場合は、変更したい要素（ID・Class）より後ろの行にscriptを記述する必要があります。

HTML

<p id="js-text_test11">このテキストを赤くします</p>

JavaScript

<script>
 document.getElementById('js-text_test11').style.color = "red";
</script>

できあがったもの

Classを取得する場合1「getElementsByClassName」

次にClassを取得する場合ですが、Classを取得するJavaScriptのメソッドにはgetElementsByClassNameがあります。

ID取得の場合と同じようにdocument.getElementsByClassName('Class名')と記述します。

試しにID取得と同じように記述してみましたが、結果としてはJavaScriptが適用されませんでした。

<p class="js-text_test21">このテキストを赤くします（できない）</p>

document.getElementsByClassName('js-text_test21').style.color = "red";

JavaScriptでClassを取得する場合、getElementsByClassName('Class名')の後ろに[0]を追加する必要があります。

これは、同じID名はそのページ内に1つしか使えない属性なのに対してClass名は複数使えるので、その出現する順番を指定する必要があるためです。

[]の中の数字はその出現順を表し、0から数えます。

それでは今度は[]を追記してみます。

HTML

<p class="js-text_test22">このテキストを赤くします（できる）</p>
<p class="js-text_test22">このテキストを赤くします（できない）</p>

JavaScript

<script>
	document.getElementsByClassName('js-text_test22')[0].style.color = "red";
</script>

できあがったもの

テキストが赤くなったのはjs-text_test22要素の中でも最初だけでした。

これは[]の中で要素の出現順を指定しているため、その順番以外の要素はJavaScriptが適用されないためです。

ではClass全てを一括で取得したい場合は、forでループ処理をしたら良いです。

for文を使うことで、同じClass名を繰り返し取得できます。

使い方としては以下のようになります。

Class名js-text_test23をexample23（名前は任意の物でOK）という変数に宣言し、それをループ処理する事でexample23の個数分スタイル（テキストを赤くする）を適用させています。

HTML

<p class="js-text_test23">このテキストを赤くします（できる）</p>
<p class="js-text_test23">このテキストを赤くします（できた）</p>
<p class="js-text_test23">このテキストを赤くします（できた）</p>

JavaScript

const example23 = document.getElementsByClassName('js-text_test23');
for( i=0; i<example23.length;i++) {
	example23[i].style.color = "red";
}

できあがったもの

Classを取得する場合2「querySelectorAll」

JavaScriptでClassを取得する方法はもう1つquerySelectorAllメソッドがあります。

querySelectorAllの場合、IDもClassもどちらも取得できますが、記述の違いとしてはIDなら#、Classなら.を追記する必要があります。

Class名の場合、document.querySelectorAll('.クラス名')のようになります。

querySelectorAllの場合も[]が必要になります。

HTML

<p class="js-text_test31">このテキストを赤くします（できる）</p>
<p class="js-text_test31">このテキストを赤くします（できた）</p>

JavaScript

const example31 = document.querySelectorAll('.js-text_test31');
for( i=0; i<example31.length;i++) {
	example31[i].style.color = "red";
}

できあがったもの

getElementsByClassNameもquerySelectorAllもどちらもClassが取得できるならquerySelectorAllを使えば良いというふうに考えてしまいます。

しかし、実はgetElementsByClassNameの方が処理速度は速いとも言われていますし、querySelectorAllは静的で、リアルタイムな更新に対応できない等の違いがあるみたいです。

複数Classで指定する場合（「A」and「B」）

それでは次に「複数Classで指定する場合」でのJavascriptでの取得方法です。

例えば「Class名A」かつ「Class名B」を含んだClassを指定したい場合は、getElementsByClassName()の()の中を半角スペースで区切って記述します。

具体的には以下のように記述します。

HTML

<p class="js-text_test41">このテキストは赤くなりません</p>
<p class="js-text_test42">このテキストも赤くなりません</p>
<p class="js-text_test41 js-text_test42">このテキストは赤くなります</p>

JavaScript

const example40 = document.getElementsByClassName('js-text_test41 js-text_test42');
for( i=0; i<example40.length;i++) {
	example40[i].style.color = "red";
}

js-text_test41やjs-text_test42のみのClassはテキストが赤くならず、両方含んだClassのみテキストが赤くなりました。

複数Classで指定する場合（「A」or「B」）

同様に、今度は「Class名A」または「Class名B」を含んだClassを指定したい場合は('')内を,で区切ります。

しかし、orの場合getElementsByClassNameは使用できないみたいです。

実際に試してみました。

<p class="js-text_test51">このテキストは赤くなりません</p>
<p class="js-text_test52">このテキストも赤くなりません</p>
<p class="js-text_test51 js-text_test52">このテキストも赤くなりません</p>

const example51 = document.getElementsByClassName('js-text_test51 , js-text_test52');
for( i=0; i<example51.length;i++) {
	example51[i].style.color = "red";
}

複数のClassをorで指定したい場合、querySelectorAllメソッドを使うようになります。

HTML

<p class="js-text_test53">このテキストは赤くなります</p>
<p class="js-text_test54">このテキストも赤くなります</p>
<p class="js-text_test53 js-text_test54">このテキストも赤くなります</p>

JavaScript

const example52 = document.querySelectorAll('.js-text_test53 , .js-text_test54');
for( i=0; i<example52.length;i++) {
	example52[i].style.color = "red";
}

できあがったもの

特定の親要素内の子Classのみ指定する場合

親がIDでClassが子の場合

親要素がidで子要素がclassの入れ子構造の場合、getElementById()に続けてgetElementsByClassName()と記述すると取得できます。

HTML

<p class="js-child61">このテキストは赤くなりません</p>
<div id="js-parent61">
	<p class="js-child61">このテキストは赤くなります</p>
</div>

JavaScript

const example61 = document.getElementById('js-parent61').getElementsByClassName('js-child61');
for( i=0; i<example61.length;i++) {
	example61[i].style.color = "red";
}

ただし、親要素がclassの場合、親要素もgetElementsByClassName()[0]で記述する必要があります。

ソースを書くとこんな感じです。

document.getElementsByClassName('親のClass')[0].getElementsByClassName('子のClass')[0].style.color="red";

ただしこの場合、親・子ともに1番目の要素にしか適用されないので、for文によるループが必要です。

親・子ともにループが必要（二重ループ）になり、JavaScriptの記述が少し複雑になるため、詳しくは別の機会で説明したいと思います。

親がClassで子がClassの場合（1）

ではあらためて、親子ともにClassの入れ子構造の場合querySelectorAllメソッドを使用するとシンプルです

その際('')内を>で区切ります。

CSSの「子セレクタ」と同じ理屈です。ただしCSS同様、親要素直下のClassでないと適用されません。

HTML

<p class="js-child63">このテキストは赤くなりません</p>
<div class="js-parent63">
	<p class="js-child63">このテキストは赤くなります</p>
	<div>
		<p class="js-child63">このテキストは赤くなりません</p>
	</div>
</div>

JavaScript

const example63 = document.querySelectorAll('.js-parent63 > .js-child63');
 for( i=0; i<example63.length;i++) {
 example63[i].style.color = "red";
}

できあがったもの

親がClassで子がClassの場合（2）

孫セレクタも含めて適用させたい場合、querySelectorAllメソッドの('')内の各Classを半角スペースで区切るとできます。

HTML

<p class="js-child64">このテキストは赤くならない</p>
<div class="js-parent64">
	<p class="js-child64">このテキストは赤くなります</p>
	<div>
		<p class="js-child64">このテキストも赤くなります</p>
	</div>
</div>

JavaScript

const example64 = document.querySelectorAll('.js-parent64 .js-child64');
for( i=0; i<example64.length;i++) {
	example64[i].style.color = "red";
}