element.getElementsByClassName( class )メソッド

element.getElementsByClassName( class )は、「element」に指定した要素の内容のうち、引数「class」に指定したクラス名を持つ全ての要素への参照を格納した配列を返すメソッド。

引数「class」に複数のクラス名を指定すると、指定した全てのクラス名を持つ全ての要素への参照を格納した配列を返す。

構文

var $elementsList = $elementNodeReference.getElementsByClassName( class );

引数

class
クラス名を指定。
複数のクラス名を指定することもできる。

戻り値

「$elementNodeReference」に指定した要素の内容のうち、指定した全てのクラス名を持つ全ての要素への参照を格納した配列。要素リスト。

サンプル①

サンプル①の動作について

「sampleA()」ボタンをクリックすると、ボタンの下の1つ目のリスト項目に「1」、2つ目のリスト項目に「2」と表示する。

サンプル①のソースコード

JavaScript

<script type="text/javascript">
function sampleA() {
    var $elementNodeReference = document.getElementById( "sampleA" );
    var $sampleA = $elementNodeReference.getElementsByClassName( "sampleAItemA" );
    $sampleA[0].innerHTML = "1";
    $sampleA[1].innerHTML = "2";
    $sampleA[2].innerHTML = "3";
}
</script>

HTML

<button onclick="sampleA();">sampleA()</button>
<ol id="sampleA">
    <li class="sampleAItemA"></li>
    <li class="sampleAItemA sampleAItemB"></li>
    <li class="sampleAItemB"></li>
</ol>

サンプル②

サンプル②の動作について

「sampleB()」ボタンをクリックすると、ボタンの下の2つ目のリスト項目に「サンプル1」と表示する。

サンプル②のソースコード

JavaScript

<script type="text/javascript">
function sampleB() {
    var $elementNodeReference = document.getElementById( "sampleB" );
    var $sampleBItem = $elementNodeReference.getElementsByClassName( "sampleBItemA sampleBItemB" );
    $sampleBItem[0].innerHTML = "サンプル1";
    $sampleBItem[1].innerHTML = "サンプル2";
    $sampleBItem[2].innerHTML = "サンプル3";
}
</script>

HTML

<button onclick="sampleB();">sampleB()</button>
<ol id="sampleB">
    <li class="sampleBItemA"></li>
    <li class="sampleBItemA sampleBItemB"></li>
    <li class="sampleBItemB"></li>
</ol>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, メソッド, リファレンス, 参照, 逆引き パーマリンク