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] 要素の全プロパティをコンソールに出力する(console.dir)

要素の全プロパティをコンソールに出力するには、console.dirを使用します。 サンプルソース 例)要素(id="t ...

[JavaScript] Submitアクションを起こす

JavaScriptからSubmitするには、submit()を使用します。 サンプルソース 例)リンクをクリックすると ...

[JavaScript] 指定した文字の出現数を取得する

文字列中に指定した文字が出現する数を取得するサンプルFunctionです。 サンプルソース 例)指定した文字の出現数を取 ...

[JavaScript] 実装を厳格化する(use strict)

JavaScriptのコードの書き方は、変数宣言をしなくてもOKだったりと、わりと曖昧なコードの書き方が許されています。 ...

[JavaScript] パスワード用にランダムな文字列を生成する

ランダムな文字列を作成するサンプルです。 サンプルソース 例)半角英数字と一部記号からランダムな8桁文字列を生成する [ ...

スポンサーリンク