JavaScript

[JavaScript] class名からオブジェクトを取得する

投稿日:2016年10月1日 更新日:

タグに付けられたclass名からオブジェクトを取得するには、 document.getElementsByClassNameを使用します。

サンプルソース

例1)classが'abc'の要素を全て取得して要素数を表示する

(結果)
3

getElementsByClassNameの戻り値は配列なので、全要素に処理を行いたい場合は以下のようにします。

例2)getElementsByClassNameで取得した全要素の背景色を黄色にする

解説

  • document.getElementsByClassNameは指定したクラス名のオブジェクトを全て取得します。
  • 戻り値はNodeList型です。
  • 指定したクラス名のオブジェクトが1つも無い場合、戻り値は0件のNodeList型です。(nullではありません。)
  • jQueryで同じ事を行いたい場合は、セレクタ「$('.class名')」をご使用ください。
    [jQuery] セレクタ一覧

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] タグ名からオブジェクトを取得する

タグ名からオブジェクトを取得するには、 document.getElementsByTagNameを使用します。 サンプ ...

[JavaScript] 即時関数を使用する

即時関数は、関数の定義と実行を同時に行う関数です。 構文 即時関数の構文です。 即時関数は通常の関数と同様に、引数を受け ...

[JavaScript] 画像が読込み中かどうかチェックする

画像が読込み中かどうかチェックするサンプルです。 サンプルソース 例)画像が読込み中かどうかチェックする [crayon ...

[JavaScript] チェックボックスにチェックを付ける

チェックボックスにチェックを付けるサンプルです。 サンプルソース 例)ボタンを押すとチェックボックスのオン/オフを切り替 ...

[JavaScript] canvasタグに画像を読み込む

canvasタグに画像を読み込むサンプルです。 サンプルソース 例)ボタンを押すとcanvasに画像(inu.png)を ...

スポンサーリンク