document.getElementsByClassName( class )は、引数「class」に指定したクラス名を持つ全ての要素への参照を格納した配列を返すメソッド。
引数「class」に複数のクラス名を指定すると、指定した全てのクラス名を持つ全ての要素への参照を格納した配列を返す。
構文
var $elementsList = document.getElementsByClassName( class );
引数
- class
- クラス名を指定。
- 複数のクラス名を指定することもできる。
戻り値
指定した全てのクラス名を持つ全ての要素への参照を格納した配列。要素リスト。
サンプル①
サンプル①の動作について
「sampleA()」ボタンをクリックすると、ボタンの下に「１」「２」「３」と一行づつ表示する。
サンプル①のソースコード
JavaScript
<script type="text/javascript">
function sampleA() {
var $sampleA = document.getElementsByClassName( "sampleA" );
$sampleA[0].innerHTML = "１";
$sampleA[1].innerHTML = "２";
$sampleA[2].innerHTML = "３";
}
</script>
function sampleA() {
var $sampleA = document.getElementsByClassName( "sampleA" );
$sampleA[0].innerHTML = "１";
$sampleA[1].innerHTML = "２";
$sampleA[2].innerHTML = "３";
}
</script>
HTML
<button onclick="sampleA();">sampleA()</button>
<p class="sampleA"></p>
<p class="sampleA"></p>
<p class="sampleA"></p>
<p class="sampleA"></p>
<p class="sampleA"></p>
<p class="sampleA"></p>
サンプル②
サンプル②の動作について
「sampleB()」ボタンをクリックすると、ボタンの下の2つ目のリスト項目に「サンプル１」と表示する。
サンプル②のソースコード
JavaScript
<script type="text/javascript">
function sampleB() {
var $sampleItem = document.getElementsByClassName( "sampleItemA sampleItemB" );
$sampleItem[0].innerHTML = "サンプル１";
$sampleItem[1].innerHTML = "サンプル２";
$sampleItem[2].innerHTML = "サンプル３";
}
</script>
function sampleB() {
var $sampleItem = document.getElementsByClassName( "sampleItemA sampleItemB" );
$sampleItem[0].innerHTML = "サンプル１";
$sampleItem[1].innerHTML = "サンプル２";
$sampleItem[2].innerHTML = "サンプル３";
}
</script>
HTML
<button onclick="sampleB();">sampleB()</button>
<ol id="sampleB">
<li class="sampleItemA"></li>
<li class="sampleItemA sampleItemB"></li>
<li class="sampleItemB"></li>
</ol>
<ol id="sampleB">
<li class="sampleItemA"></li>
<li class="sampleItemA sampleItemB"></li>
<li class="sampleItemB"></li>
</ol>