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] URLからポート番号を取得する(location.port)

URLからポート番号を取得するには、location.portを使用します。 サンプルソース 例)現在のページのURLか ...

[JavaScript] 10進表記のカラーコードを16進表記に変換する

10進表記のカラーコードを16進表記に変換したい場合にご利用ください。 10進表記のカラーコードを16進表記に変換する ...

[JavaScript] 新規に開いた画面にSubmitする

新規に開いた画面にSubmitするサンプルです。 サンプルソース 例)ボタンを押すと 1000×500px の画面を開き ...

[JavaScript] ページのタイトルを取得する(document.title)

表示中のページのタイトルを取得するには、document.titleを使用します。 サンプルソース 例)表示中ページのタ ...

[JavaScript] Javaアプレットが使用できるかどうか調べる

Javaアプレットが使用できるかどうか調べるサンプルです。 サンプルソース 例)javaアプレットが使用できるかどうか判 ...

スポンサーリンク