document.getElementsByClassName( class )メソッド

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

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

構文

var $elementsList = document.getElementsByClassName( class );

引数

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

戻り値

指定した全てのクラス名を持つ全ての要素への参照を格納した配列。要素リスト。

サンプル①

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

「sampleA()」ボタンをクリックすると、ボタンの下に「1」「2」「3」と一行づつ表示する。

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

JavaScript

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

HTML

<button onclick="sampleA();">sampleA()</button>
<p class="sampleA"></p>
<p class="sampleA"></p>
<p class="sampleA"></p>

サンプル②

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

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

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

JavaScript

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

HTML

<button onclick="sampleB();">sampleB()</button>
<ol id="sampleB">
    <li class="sampleItemA"></li>
    <li class="sampleItemA sampleItemB"></li>
    <li class="sampleItemB"></li>
</ol>

スポンサード リンク

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