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